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如 今 ， 在 许多 优秀 的 移动 App 应 用 界 
面 中 都 能 够 看 到 丰富 细 肛 的 交互 动 效 设 
计 ， 通 过 在 App 应 用 界面 中 合理 地 加 入 交 
互动 效 ， 可 以 为 用 户 提 供 良好 的 动态 沉浸 
式 体验 ， 动 效 设 计 在 产品 研发 过 程 中 也 越 
来 越 被 认可 和 重视 。 

本 书 以 After Effects CC 为 设计 
工具 ， 对 UI 交互 动 效 设计 的 流程 和 制作 技 
巧 进行 了 全 面 、 细 致 的 剖析 。 本 书 内 容 简 
洁 、 通 俗 易 懂 ， 通 过 知识 点 与 实例 相 结 合 
的 方式 ， 让 读者 能 够 清晰 明了 地 理解 Ul 交 
互动 效 设 计 的 相关 内 容 ， 从 而 达到 学 以 致 
用 的 目的 。 全 书 共 分 6 章 ， 分 别 为 理解 U1 
交互 设计 、 初 识 U1 交 互动 效 、After 
Effects 软 件 基 础 操作 、 在 After Effects 中 
制作 动 效 并 输出 、 制 作 UI 元 素 交 互动 效 和 
UI 界面 动 效 设计 。 

本 书 结构 清晰 、 实 例 经 典 、 技 术 实 用 ， 
适合 作为 UI 交互 动 效 设计 人 员 的 参考 手 
册 ， 也 可 以 作为 高 等 院 校 相关 专业 的 教材 。 
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如 今 移动 端 App 应 用 种 类 繁多 ， 如 何 才能 够 让 自己 设计 的 移动 App 应 用 脱颖而出 呢 ? 设 
计 师 需要 考虑 的 ， 不 仅仅 是 产品 如 何 更 合理 地 展现 结构 与 功能 ， 更 重要 的 是 思考 所 开发 的 移动 
应 用 App 如 何 做 到 简便 易 懂 的 同时 又 带 给 用 户 新 颖 感 。 此 时 ， 有 限 的 屏幕 空间 仅 靠 文字 的 提示 
是 不 够 的 ， 移 动 应 用 App 需要 更 多 的 新 鲜血 液 一 一 动 效 设计 。 动 效 设计 可 以 拓展 空间 内 容 ， 简 
化 引导 流程 ， 降 低 学 习 成 本 ， 更 重要 的 是 给 用 户 带 来 意 想 不 到 的 惊喜 ， 它 就 像 人 类 的 肢体 语言 ， 
通过 肢体 语言 传达 更 多 的 抽象 信息 和 性 格 特征 。 

动 效 是 物体 空间 关系 与 功能 有 意识 的 流动 之 美 ， 它 让 用 户 更 了 解 交互 。 本 书 紧 跟 移 动 交 互 
设计 的 发 展 趋势 ， 向 读者 详细 介绍 UI 交互 动 效 设计 的 相关 知识 ， 并 讲解 目前 流行 的 交互 动 效 制 
作 软 件 After Effects， 通 过 基础 知识 与 实例 操作 相 结 合 的 方式 ， 使 读者 在 理解 的 基础 上 能 够 更 
加 快速 动手 制作 出 各 种 实用 的 界面 交互 动 效 ， 真 正 做 到 学 以 致 用 。 

本 书 从 交互 设计 的 基础 知识 开始 ， 由 浅 入 深 地 详细 介绍 UI 交互 动 效 设计 的 知识 ， 以 及 如 何 
使 用 After Effects 软件 制作 各 种 常见 的 交互 动 效 ， 将 知识 点 与 实例 相 结合 ， 使 学 习 过 程 不 再 枯 
燥 乏 味 。 全 书 共 分 6 章 ， 各 章 内 容 介绍 如 下 。 

第 1 章 理解 UI 交互 设计 ， 本 章 主要 介绍 UI 交互 设计 以 及 用 户 体验 的 相关 基础 知识 ， 使 
读者 对 UI 交互 设计 有 基本 的 了 解 ， 动 效 设计 的 最 终 目的 就 是 为 了 提升 UI 界面 的 交互 体验 。 

第 2 章 初 识 UI 交互 动 效 ， 本 章 主要 介绍 UI 交互 动 效 设 计 的 基础 知识 ， 使 读者 能 够 更 好 
地 理解 什么 是 交互 动 效 ， 以 及 交互 动 效 与 UI 设计 之 间 的 关系 ， 并 且 能 够 理解 UI 交互 动 效 的 应 
用 范围 和 常见 表现 效果 。 

第 3 章 After Effects 软件 基础 操作 ， 本 章 主要 介绍 交互 动 效 制作 软件 After Effects， 从 
认识 该 软件 的 工作 界面 着 手 ， 到 软件 的 基本 操作 方法 、 重 要 的 功能 面板 和 操作 技巧 ， 并 通过 一 
些 简单 的 交互 动 效 实例 的 制作 ， 使 读者 能 够 快速 掌握 After Effects CC 软件 的 基本 操作 和 使 用 
方法 。 

第 4 章 在 After Effects 中 制作 动 效 并 输出 ， 本 章 主要 介绍 在 After Effects 中 制作 交互 动 
效 最 重要 的 关键 帧 的 概念 及 其 操作 方法 , 还 介绍 了 有 关 运 动 路 径 、 蒙 版 等 高 级 动画 的 表现 方法 ， 
以 及 如 何 将 After Effects 中 所 制作 的 动 效 进行 泻 染 输出 的 方法 。 

第 5 章 ”制作 UI 元 素 交互 动 效 ， 本 章 主 要 介绍 UI 界面 中 各 种 元 素 交 互动 效 的 表现 和 设计 
方法 ， 并 结合 实例 练习 ， 使 读者 能 够 快速 掌握 各 种 Ul 元 素 交互 动 效 的 制作 方法 。 

第 6 章 UI 界面 动 效 设计 , 本 章 主要 介绍 UI 界面 交互 动 效 设计 的 相关 知识 , 包括 加 载 动 效 、 
引导 界面 动 效 、 导 航 菜单 动 效 、 界 面 切换 动 效 和 其 他 界面 动 效 等 ， 通 过 知识 点 的 学 习 使 读者 能 
够 理解 UI 界面 动 效 设计 的 要 点 ， 通 过 实例 的 制作 使 读者 掌握 UI 界面 动 效 的 制作 方法 。 
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为 了 方便 读者 学 习 ， 本 书 为 每 个 实例 提供 了 教学 视频 ， 只 要 扫描 一 下 书 中 实例 名 称 旁 边 的 
二 维 码 ， 即 可 直接 打开 视频 进行 观看 ， 或 者 推送 到 自己 的 邮箱 中 下 载 后 进行 观看 。 本 书 配套 的 
立体 化 学 习 资 源 中 提供 了 书 中 所 有 实例 的 素材 源 文件 、 最 终 文件 、 教 学 视频 和 PPT 课件 ， 并 附 
赠 海 量 实用 资源 。 读 者 在 学 习 时 可 扫描 下 面 的 二 维 码 ， 然 后 将 内 容 推送 到 自己 的 邮箱 中 ， 即 可 
下 载 获取 相应 的 资源 ( 注意 : 请 将 这 两 个 二 维 码 下 的 压缩 文件 全 部 下 载 完毕 后 ， 再 进行 解压 ， 
即 可 得 到 完整 的 文件 内 容 )。 


o 


本 1 


1.2 ”交互 设计 与 用 户 体验 


i 


2.1 


22 


2.3 


理解 UI 交互 设 


UI 设计 … 1 
1.1.1 UI 设计 概述 
1.1.2 了 解 UI 设计 师 … 
1.1.3 ”UI 设计 的 特点 … 
1.1.4 UI 设计 的 相关 术语 


1.2.1 ”交互 设计 概述 
1.2.2 ”交互 设计 的 基本 步骤 


UI 交互 动 效 17 
记 下 人 交互 动 效 概 述 sseaaaaasa 17 
2.1.2 UI 交互 动 效 的 应 用 领域 ……… 18 
交互 动 效 与 UI 设计 


2.2.1 ”优秀 交互 动 效 的 特点 … 
2.2.2 ”交互 动 效 的 优势 
2.2.3” 动 效 的 分 类 
交互 动 效 在 用 户 体验 中 的 应 用 ……… 26 
2.3.1 在 交互 过 程 中 添加 动 效 

需要 考虑 的 因素 ……………… 26 


1.3 ”移动 端 用 户 体验 的 发 展 趋势 … 
1.4 在 UI 交互 中 加 入 动 效 设计 …… 


交互 动 效 


2.4 如 何 设计 动 效 


2.5 制作 UI 交互 动 效 的 工具 
2.6 ”认识 基础 UI 交互 动 效 


第 1 章 


只 


1.2.3 用 户 体验 概述 
1.2.4 用 户 体验 的 5 个 层面 … 
1.2.5 用 户 体验 的 需求 层次 … 
1.2.6 ”交互 设计 与 用 户 体验 的 关系 … 12 


1.4.1 ”UI1 动 效 的 发 展 ………………… 14 
1.4.2” 动 效 在 UI 交互 设计 中 的 


只 


2.3.2 ”如 何 表 现 交互 动 效 ………………26 


2.4.1 ”要 有 一 个 创意 想法 
2.4.2 ”根据 想法 付 诸 行 动 … 


2.6.1 
2.6.2 
26.3 3 
2.6.4 


After Effects 软件 基础 操作 5 项 


3.1 


认识 After Effects …… 
3.1.1 After Effects 概述 


3.1.2 ”After Effects 的 应 用 领域 ……37 


3.2 After Effects 工作 界面 …………………… 41 


After Effects CC 移动 网 站 UI 交互 动 效 设计 全 程 揭秘 


3.3 


3.4 


3.2.1 认识 After Effects 工作 界面 …41 
3.2.2 ”切换 工作 | 
3.2.3 工具 栏 …… 42 
3.2.4 "项目 ” ee: 
3.2.5 “合成 ”窗口 … 

3.2.6 “时 间 轴 ”面板 ……………… 45 
3.2.7 了解 工作 界面 中 的 其 他 面板 …45 
快速 掌握 After Effects 的 基本 操作 …-46 
3.3.1 ”创建 新 项 目 文件 …………………46 


3.3.2 ”新 建 合成 …… 
3.3.3 ”保存 和 关闭 文件 
3.3.4 After Effects 中 的 基本 
工作 流程 td 48 

导入 与 管理 素材 
3.4.1 导入 素材 的 基本 方 > 
3.4.2 ”导入 PSD 格式 素材 ………… 50 
实例 01 一 一 通过 导入 PSD 格式 文件 

创建 合成 
3.4.3 导入 Al 格式 素材 文件 i 
实例 02 一 一 通过 导入 Al 格式 文件 

创建 合成 ni 52 
3.4.4 ”素材 的 管理 操作 ………………… 54 


3.5 


3.6 


3.7 


3.4.5 合成 的 在 套 ……………… 55 
认识 “时 间 轴 ”面板 …………… 57 
3.5.1 “音频 /视频 ”选项 ………….57 
3.5.2 “图 
3.5.3 “图 
3.5.4 “转换 控制 ”选项 -ee 58 
3.5.5 ”“ 父 级 和 链接 ”选项 …………… 58 
3.5.6 “时 间 控 制 ” 选 项 
After Effects 图 层 
3.6.1 ”认识 不 同类 型 的 图 层 …………… 60 
3.6.2 ”图 层 的 混合 模式 ………… 63 
实例 03 一 一 快速 制作 图 片 素材 

淡 六 淡出 动 效 .二 63 


图 层 的 基础 “变换 ”属性 
3.7.1 锚 点 


在 After Effects 中 制作 动 效 并 输出 “5% 


4.1 


4.2 


关键 帧 与 图 表 编辑 器 
4.1.1， 帧 与 关键 帧 
4.1.2 ”创建 关键 帧 
4.1.3 ”关键 帧 的 基本 操作 方法 … 
实例 06 一 一 制作 趣味 矩形 拼图 动 


效 刍 … 和 ee 82 
4.1.4 图 表 编 辑 器 的 操作 方法 …………… 89 
实例 07 一 制作 弹跳 变形 动 效 ……… g0 
形状 的 应 用 
4.2.1 关于 形状 
4.2.2 ”创建 路 径 群 组 …………… 98 


4.3 


4.4 


4.2.3 ”路 径 形状 属性 设置 ……… 
实例 08 一 一 制作 简单 的 Loading 


99 


调整 动画 运动 路 径 he 
将 直线 运动 路 径 调 整 为 


4.3.1 

有 线 运动 路 径 s0sssennensneenisinsss 106 
4.3.2 运动 自 定 向 108 
实例 09 一 制作 魔法 飞行 动 效 ……108 
创建 和 使 用 蒙 版 图 层 
4.4.1 ” 蒙 版 动画 原理 … dot 113 
4.4.2 ”形状 工具 …………………… 13 


SS 


4.5 


4.4.3 钢笔 工具 114 
4.4.4 ”创建 蒙 版 114 
实例 10 一 一 为 素材 图 层 创建 蒙 版 ……114 
4.4.5 设置 蒙 版 属性 116 
实例 11 一 一 制作 蒙 版 属性 动 效 ……… 118 
4.4.6 ” 蒙 版 的 琶 加 处 理 ………………… 121 
实例 12 一 一 制作 扫描 二 维 码 动 效 ……122 
在 After Effects 中 泻 染 输出 动画 …… 127 
4.5.1 ”认识 演 染 工作 区 …………………127 


4.5.2 ”理解 演 染 设置 选项 ………………128 


4.5.3 泻 染 输出 i 130 
实例 13 一 一 将 动 效 泻 染 输出 为 视频 

a 130 
4.5.4 配合 Photoshop 输出 

GIF 文件 ee 132 

实例 14 一 一 将 动 效 输出 为 GIF 动画 

图 片 PR 132 
4.5.5 ”将 动画 嵌入 手机 模板 ………… 133 
实例 15 一 一 将 动画 效果 嵌入 手机 

模板 中 EA 133 


制作 UI 元 素 交 互动 效 。 5 


5.1 


5.2 


5.3 


按钮 与 图 标 动 效 设计 …………… 137 
5.1.1 开关 按钮 ………… 137 
5.1.2 ”制作 开关 按钮 动 效 …………… 137 
实例 16 一 一 制作 开关 按钮 动 效 ……… 138 
5.1.3 ”图 标 在 UI 界面 中 的 作用 ………143 
5.1.4 ”图 标 动 效 的 常见 表现 方法 ……144 
5.1.5 ”制作 图 标 变换 动 效 ………………147 
实例 17 一 一 制作 图 标 变换 动 效 ……… 147 
5.1.6 ”制作 日 历 图 标 动 效 ……………… 153 
实例 18 一 一 制作 日 历 图 标 动 效 ……… 153 
5.1.7 ”制作 相机 图 标 动 效 … “153 


实例 19 一 一 制作 相机 图 
进度 条 动 效 设计 … 
5.2.1 常见 的 进度 条 表现 形式 : 
5.2.2 ”制作 矩形 进度 条 动 效 … “161 
实例 20 一 一 制作 矩形 进度 条 动 效 
5.2.3 ”制作 圆 形 进度 条 动 效 … 
实例 21 一 一 制作 圆 形 进度 条 动 效 
工具 栏 动 效 设 计 

5.3.1 ”关于 工具 栏 动 效 设计 …………165 
5.3.2 ”制作 展开 工具 栏 动 效 ……………166 
实例 22 一 制作 展开 工具 栏 动 效 ……166 


动 效 


5.4 


5.5 


5.3.3 ”制作 工具 图 标 动感 展开 动 效 …175 
实例 23 一 一 制作 工具 图 标 动感 


文字 动 效 设计 ……… 
5.4.1 文字 动 效 的 表现 优势 
5.4.2 ”常见 的 文字 动 效 表 现 方法 …… 
5.4.3 ”制作 手写 文字 动 效 ……………… 
实例 24 一 一 制作 手写 文字 动 效 ……… 
5.4.4 ”制作 闪光 描 边 文字 动 效 ……… 
实例 25 一 一 制作 闪光 描 边 文字 


5.5.1 动态 Logo 概述 
5.5.2 动态 Logo 表现 的 优势 
5.5.3 ”Logo 动 效 需要 注意 的 问题 …189 
5.5.4 ”制作 动感 模糊 Logo 动 效 ……189 
实例 26 一 一 制作 动感 模糊 Logo 


5.5.5 ”制作 动感 切片 Logo 动 效 …… 
实例 27 一 一 制作 动感 切片 Logo 


UI 界面 动 效 设计 


6.1 动 效 设计 的 作用 与 常见 效果 … …195 


6.1.1 动 效 设计 的 作用 …… 195 
6.1.2 ”常见 的 UI 界 理 “199 
6.1.3 ”制作 手机 充电 动 效 ……………… 203 
实例 28 一 一 制作 手机 充电 动 效 ……… 203 

6.1.4 制作 手机 垃圾 清理 完成 
动 效 odd 208 

实例 29 一 一 制作 手机 垃圾 清理 
完成 动 效 “208 
6.2 ”界面 加 载 等 待 动 效 设计 …208 
6.2.1 了 解 力 载 等 待 动 效 a 208 
6.2.2 ”加 载 动 效 的 常见 表现 形式 ……209 
6.2.3 ”制作 简单 的 圆 环 加 载 动 效 ……211 

实例 30 一 一 制作 简单 的 圆 环 加 载 
动 关 i 211 

6.2.4 ”制作 界面 下 拉 刷 新 加 载 


6.3.2 引导 界面 的 设计 要 素 


6.3.3 制作 引导 界面 切换 动 效 ……… 217 

实例 32 一 一 制作 引导 界面 切换 动 效 …218 

6.4 导航 菜单 动 效 设计 A A 223 
6.4.1 ”交互 式 动态 导航 菜单 的 
6.4.2 ”导航 菜单 的 设计 要 点 
6.4.3 ”制作 侧 边 滑 入 导航 菜单 

动 族 二 ni 225 


6.5 


6.6 


6.7 


只 
实例 33 一 一 制作 侧 边 滑 入 导航 菜单 
动 妆 ee 225 
界面 切换 动 效 设计 ………… 232 
6.5.1 4 种 常见 的 界面 切换 转 场 
动 效 aednedesssbnr slat lis 232 
6.5.2 界面 切换 动 效 的 设计 规则 ……235 
6.5.3 ”制作 登录 转 场 动 效 …………… 238 
实例 34 一 一 制作 登录 转 场 动 效 ……… 238 


6.5.4 制作 App 解锁 转 场 动 效 ………239 
实例 35 一 一 制作 App 解锁 转 场 


UI 界面 交互 动 效 设计 规范 … 
6.6.1 界面 动 效 设计 要 点 …………… 
6.6.2 ”通过 动 效 设计 提升 UI 界面 
6.6.3 ”制作 天 气 界面 动 效 . 


实例 36 一 一 制作 天 气 界面 动 效 ……… 251 
6.6.4 ”制作 界面 列表 入 场 动 效 ……… 257 
实例 37 一 一 制作 界面 列表 入 场 动 效 …257 
如 何 设计 出 优秀 的 UI 交互 动 效 ……257 
6.7.1 ”明确 系统 状态 ……… 257 
6.7.2 ”让 按钮 和 操控 拥有 触感 
6.7.3 ”有 意义 的 转 场 动 效 : 
6.7.4 ”帮助 用 户 开始 
6.7.5 ”强调 界面 的 变化 … 
6.7.6 ”需要 注意 的 细节 
6.7.7 ”制作 App 界面 菜单 滑动 

动 族 ne 260 
实例 38 一 一 制作 App 界面 菜单 

滑动 动 效 EN 260 


EE CE 


随 着 智能 手机 和 平板 电脑 等 移动 设备 的 普及 ， 使 用 这 些 移动 设备 进行 交流 和 娱乐 已 经 成 为 人 们 
日 常生 活 中 不 可 缺少 的 一 部 分 。 移 动 设备 成 为 与 用 户 交互 最 直接 的 工具 ， 各 种 类 型 的 移动 App 软件 
层出不穷 ， 极 大 地 丰富 了 移动 设备 的 应 用 。 

移动 设备 用 户 不 仅 期 望 移动 设备 的 软 、 硬件 拥有 强大 的 功能 , 更 注重 操作 界面 的 直观 性 、 便捷 性 ， 
能 够 提供 轻松 、 愉 快 的 操作 体验 。 


二 二 U| 设计 概述 一 全 

Ul 即 User Interface( 用 户 界面 ) 的 简称 ，UI 设计 则 是 指 对 软件 的 人 机 交互 、 操 作 逻 辑 、 界 面 
观 3 个 方面 的 整体 设计 。 好 的 UI 设计 不 仅 可 以 让 软件 变 得 有 个 性 、 有 品位 ， 还 可 以 使 用 户 的 操作 变 
得 更 加 舒服 、 简 单 、 自 由 ， 充 分 体现 产品 的 定位 和 特点 。UI 设计 包含 范畴 比较 广泛 ， 包 括 软件 UI 设 
计 、 网 站 UI 设计 、 游 戏 UI 设计、 移动 设备 Ul 设计 等 。 如 图 1-1 所 示 为 部 分 Ul 设计 作品 。 


图 1-1 


UI 设计 不 仅仅 是 单纯 的 美术 设计 ， 它 需要 根据 使 用 者 、 使 用 环境 、 使 用 方式 、 最 终 用 户 而 设计 ， 
是 纯粹 的 、 科 学 性 的 艺术 设计 。 一 个 友好 美观 的 界面 会 给 用 户 带 来 舒适 的 视觉 享受 ， 拉 近 人 机 之 间 
的 距离 ， 所 以 UI 设计 需要 和 用 户 研究 紧密 地 结合 ， 是 一 个 不 断 为 最 终 用 户 设计 满意 视觉 效果 的 过 程 。 
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UI 设计 不 仅 需要 客观 的 设计 思想 ， 还 需要 更 加 科学 和 人 性 化 的 设计 理念 。 如 何在 本 质 上 提升 产品 用 户 界面 的 设 
计 品 质 ? 这 不 仅 需 要 考虑 到 界面 的 视觉 设计 ， 还 需要 考虑 到 人 、 产 品 和 环境 三 者 之 间 的 关系 。 


了 和 解 Ui 设计 师 © 

很 多 人 还 不 太 清楚 什么 是 UI 设计 师 ，UI 设计 师 的 工作 是 什么 。 其 实 ，UI 设计 从 工作 内 容 上 来 
说 主要 有 3 个 方向 ， 这 3 个 方向 主要 是 由 UI 研究 的 3 个 因素 决定 的 ， 这 3 个 因素 分 别 是 研究 界面 、 
研究 人 与 界面 的 关系 、 研 究 人 。 


1. 研究 界面 一 -图形 设计 师 (Graphic UI Designer) ) 


目前 国内 大 部 分 的 UI 设计 者 都 是 从 事 研究 界面 的 图 形 设 计 师 ， 也 有 人 称 其 为 “美工 ”， 但 实际 
上 并 不 是 单纯 意义 上 的 美术 人 员 ， 而 是 软件 产品 的 外 形 设计 师 。 

通常 ，UI 图 形 设计 师 大 多 是 专业 美术 院 校 毕业 ， 其 中 大 部 分 都 具有 美术 设计 教育 背景 ， 例 如 工 
业 外 形 设计 、 信 息 多 媒体 设计 、 装 潢 设计 等 。 


2. 研究 人 与 界面 的 关系 一 一 交互 设计 师 (Interaction Designer) 》 


在 出 现 软 件 图 形 界面 之 前 ， 长 期 以 来 UI 设计 师 就 是 指 交 互 设 计 师 。 交 互 设计 师 的 工作 内 容 就 是 
设计 软件 的 树 状 结构 、 操 作 流程 、 软 件 的 结构 与 操作 规范 等 。 一 个 软件 产品 在 进行 编码 设计 之 前 需 
要 做 的 工作 就 是 交互 设计 ， 并 且 确 定 交互 模型 和 交互 规范 。 交 互 设计 师 一 般 都 需要 具有 软件 工程 师 
的 背景 。 


3. 研究 人 一 一 用 户 测试 / 研究 工程 师 (User Experience Engineer) 


为 了 保证 产品 的 质量 ， 任 何 产品 在 推出 之 前 都 需要 经 过 测试 ， 软 件 的 功能 编码 需要 进行 测试， 
UI 设计 也 需要 进行 测试 。UI 设计 的 测试 与 编码 没有 任何 的 关系 ， 主 要 是 测试 交互 设计 的 合理 性 以 及 
图 形 设计 的 美观 性 。 测 试 的 方法 一 般 都 是 采用 焦点 小 组 的 形式 ， 用 目标 用 户 问卷 的 形式 来 衡量 UI 设 
计 的 合理 性 。 

用 户 测试 /研究 工程 师 的 职位 很 重要 ， 如 果 没有 这 个 职位 ，UI 设计 的 好 坏 只 能 凭借 设计 师 的 经 
验 或 者 领导 的 审美 来 判断 ， 这 样 会 给 企业 带 来 很 大 的 风险 。 用 户 测试 /研究 工程 师 一 般 都 需要 具有 心 
理学 、 人 文学 背景 。 

综 上 所 述 ， 读 者 应 该 明白 UI 设计 师 可 以 分 为 3 种 ， 分 别 是 UI 图 形 设计 师 、 交 互 设 计 师 和 用 户 
测试 /研究 工程 师 。 


三 UI 设计 的 特点 © 


随 着 移动 设备 的 不 断 普 及 ， 对 移动 设备 软件 的 需求 越 来 越 多 ， 移 动 操作 系统 厂商 都 不 约 而 同 
建立 移动 设备 应 用 程序 市 场 ， 如 苹果 公司 的 App Store、 谷 歌 公 司 的 Android Market、 微 软 公司 
Windows Phone Marketplace 等 ， 给 移动 设备 用 户 带 来 巨 量 的 应 用 软件 。 

这 些 应 用 软件 界面 各 异 ， 移 动 设备 用 户 在 众多 的 应 用 软件 使 用 过 程 中 ， 最 终 会 选择 界面 视觉 
果 良好 ， 并 且 具 有 良好 用 户 体验 的 应 用 软件 。 那 么 怎样 的 移动 应 用 UI 设计 才能 够 给 用 户 带 来 好 的 
觉 效 果 和 良好 的 用 户 体验 呢 ? 接 下 来 向 读者 介绍 移动 UI 设计 的 特点 和 技巧 。 


当 用 户 首次 启动 移动 应 用 程序 时 ， 在 脑海 中 首先 想到 的 问题 是 : 我 在 哪里 ? 我 可 以 在 这 里 做 什 
么 ? 接 下 来 还 可 以 做 什么 ”要 尽力 做 到 应 用 程序 在 刚 打 开 的 时 候 就 能 够 回答 出 用 户 的 这 些 问题 。 如 
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果 一 个 应 用 程序 能 够 在 前 几 秒 的 时 间 里 告诉 用 户 这 是 一 款 适合 他 的 产品 ， 那 么 他 一 定 会 更 加 深层 次 


地 进行 发 气 。 


如 图 1-2 中 的 产品 合理 运用 颜色 给 用 户 良好 的 第 一 眼 体验 。 


订餐 App 界面 中 ， 可 以 看 到 容 清 ; 色 块 是 移动 端 界面 设计 中 常用 的 一 种 内 容 表现 方式 ， 通 过 色 ; 


晰 、 明 确 ， 通 过 不 同 颜色 的 按钮 来 区 分 不 同 的 功能 ， 
， 并 且 为 食品 类 型 设计 了 不 同 的 图 标 ， 用 户 在 使 用 时 


| 非常 方便 。 


动 端的 界面 设计 中 ， 使 用 不 同色 相 的 鲜艳 色 块 来 突出 不 同 功 
能 内 容 的 表现 ， 使 界面 的 信息 表现 更 加 突出 ， 并 且 大 色 块 更 


块 用 户 可 以 在 移动 员 屏 幕 中 更 容易 区 分 不 同 的 内 容 。 在 该 移 ; 
容易 使 用 手 进行 触摸 操作 。 


图 1-2 


2 便捷 的 输入 方式 》 


在 大 部 分 时 候 ， 人 们 只 使 用 1 个 拇指 来 操作 移动 应 用 程序 ， 所 以 在 设计 时 不 要 执着 于 多 点 触摸 
以 及 复杂 精密 的 流程 ， 而 要 让 用 户 可 以 迅速 地 完成 屏幕 和 信息 间 的 切换 和 导航 ， 快 速 获取 所 需要 的 


信息 , 要 珍惜 


用 户 每 次 的 输入 操作 。 如 图 1-3 所 示 是 在 App 中 为 用 户 提供 更 加 便捷 的 搜索 和 查找 功能 。 


3. 呈现 用 户 所 需 


户 通常 会 利用 一 些 时间 间 隙 来 做 一 些小 事情 ， 将 更 多 的 时 间 留 下 来 做 一 些 自己 喜欢 的 事情 。 


因此 ， 不 要 让 用 户 等 待 应 用 程序 来 做 某 件 事情 ， 尽 可 能 地 提升 应 用 表现 ， 改 变 Ul， 让 用 户 所 需 结果 


的 呈现 变 得 更 快 ， 如 图 1-4 所 示 。 


使 用 大 图 标 
与 文字 相 结 
合 ， 突 出 表 
现 当前 天 气 
情况 


统一 风格 
的 小 图 标 

与 文字 表 
现 未 来 几 


在 该 选择 界面 
; 可 以 通过 搜索 
; 来 非常 方便 。 


中 ， 不 但 可 以 通过 字母 进行 快速 查找 ， 还 ， 天 气 类 App 界面 设计 ， 使 用 具有 代表 性 的 城市 风景 图 上 
的 方式 快速 定位 需要 的 内 容 ， 用 户 操作 起 作为 界面 背景 来 突出 表现 当前 所 显示 的 是 哪个 城市 的 天 
气 信息 。 在 界面 正中 间 位 置 使 用 大 图 标 与 文字 结合 表现 ; 
;当前 的 天 气 情况， eh 
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4. 适当 的 横向 呈现 方式 


人 户 来 说 ， 横 向 呈现 带 来 的 体验 是 完全 不 同 的 ， 利 用 横向 这 种 更 宽 的 布局 ， 以 完全 不 同 的 
图 1-5 所 示 。 


; 这 是 同一 款 App 应 用 分 别 在 手 ; 
; 机 与 平板 电脑 中 采用 不 同 的 呈现 ; 
| 方式 。 | 
; 平板 电脑 提供 了 更 大 的 屏幕 空 ; 
| 间 ， 可 以 合理 地 安排 更 多 的 信息 
;内容 ， 而 手机 屏幕 的 空间 相对 较 
小 , 适合 展示 最 重要 的 信息 内 容 。 
; 通过 横竖 屏 不 同 的 展示 方式 ,可 
;以 为 用 户 带 来 不 同 的 体验 。 


了 5. 制作 个 性 应 用 


向 用 户 展示 一 个 个 性 的 、 与 众 不 同 的 风格 。 因 为 每 个 人 的 性 格 不 同 , 喜欢 的 应 用 风格 也 各 不 相同 
制作 一 款 与 众 不 同 的 应 用 ， 总 会 有 喜欢 它 的 用 户 ， 如 图 1-6 左 图 所 示 。 


6. 不 忽视 任何 细节 


组 中 的 任何 项 。 精 心 撰写 的 介绍 和 清晰 且 设计 精美 的 图 标 会 让 设计 的 应 
察觉 到 设计 师 额外 投入 的 这 些 精 到 所 示 。 


以 通用 性 一 定 要 强 ， 
注意 界面 的 设计 细节 ， 做 到 操作 界面 的 统一 ， 使 用 
作 界 面 ， 使 用 起 来 得 心 应 手 。 


- UI 设计 的 相关 术语 “(E 


了 解 用 户 体验 设计 领域 的 相关 专业 术语 ， 如 Ul、GUI、ID 和 UE 等 ， 可 以 帮助 我 们 进一步 加 深 
对 该 领域 的 认识 。 
© Ul(User Interface) 
UI 是 指 用 户 界面 ， 包 含 用 户 在 整个 产品 使 用 过 程 中 相关 界面 的 软 硬 件 设计 ， 襄 括 了 GUI、ID 和 
UE， 是 一 种 相对 广义 的 概念 。 


Es 


© GUI(Graphic User Interface) 

GUI 是 指 图 形 用 户 界面 ， 可 以 简单 地 理解 为 界面 美工 ， 主 要 完成 产品 软 硬 件 的 视觉 界面 部 分 ， 
比 UI 的 范畴 要 窄 。 目 前 国内 大 部 分 的 UI 设计 其 实 做 的 是 GUI， 设 计 师 大 多 出 自 美术 院 校 相关 专业 。 
© ID(Interaction Design) 
ID 是 指 交互 设计 ， 简 单 地 讲 就 是 指 人 与 计算 机 等 智能 设备 之 间 的 互动 过 程 的 流畅 性 设计 ， 一 般 
软件 工程 师 来 实施 。 
UE(User Experience) 
UE 是 指 用 户 体验 ， 更 多 关注 的 是 用 户 的 行为 习惯 和 心理 感受 ， 即 研究 用 户 怎样 使 用 产品 才能 够 
更 加 得 心 应 手 。 
© UED(UserExperience Designer) 

UED 即 用 户 体验 设计 师 的 简称 ， 这 个 工作 岗位 在 国外 企业 产品 设计 开发 中 十 分 被 重视 ， 这 与 国 
际 上 比较 注重 人 们 的 生活 质量 密切 相关 。 目 前 国内 相关 行业 特别 是 互联 网 企业 在 产品 开发 过 程 中 越 
来 越 多 地 认识 到 这 一 点 ， 很 多 著名 的 互联 网 企业 都 已 经 拥有 了 自己 的 UED 团队 。 


交互 设计 与 用 户 体验 ? | 


| 

在 网 络 发 展 的 初期 , 由 于 技术 和 产业 发 展 的 不 成 熟 , 交互 设计 更 多 地 追求 技术 创新 或 者 功能 实现 ， 

很 少 考虑 用 户 在 交互 过 程 中 的 感受 ， 这 就 使 很 多 网 络 交互 设计 得 过 于 复杂 或 者 过 于 技术 化 ， 用 户 理 

解 和 操作 起 来 困难 重重 ， 因 而 大 大 降低 了 用 户 参 与 网 络 互 动 的 兴趣 。 随 着 数字 技术 的 发 展 以 及 市 场 

竞争 的 日 趋 激烈 ， 很 多 交互 设计 师 开始 将 目光 转向 如 何 为 用 户 创造 更 好 的 交互 体验 ， 从 而 吸引 用 户 
参与 到 网 络 交互 中 来 。 于 是 ， 用 户 体验 逐渐 成 为 交互 设计 的 首要 关注 点 和 重要 的 评价 标准 。 


区 交 吾 设计 概述 加 

交互 设计 ， 又 称 为 互动 设计 (Interaction Design)， 是 指 设计 人 与 产品 或 服务 互动 的 一 种 机 制 。 交 
互 设计 在 于 定义 产品 ( 软件 、 移 动 设备 、 人 造 环境 、 服 务 、 可 穿戴 设备 以 及 系统 的 组 织 结构 等 ) 在 特 
定 场景 下 反应 方式 相关 的 界面 ， 通 过 对 界面 和 行为 进行 交互 设计 ， 可 以 让 使 用 者 使 用 人 造物 来 完成 
目标 ， 这 就 是 交互 设计 的 目的 。 

从 用 户 角度 来 说 ， 交 互 设 计 是 一 种 如 何 让 产品 易 用 、 有 效 而 让 人 愉悦 的 技术 ， 它 致力 于 了 解 目 
标 用 户 和 他 们 的 期 望 ， 了 解 用 户 在 与 产品 交互 时 彼此 的 行为 ， 了 解 “ 人 ”本 身 的 心理 和 行为 特点 。 
同时 还 包括 了 解 各 种 有 效 的 交互 方式 ， 并 对 它们 进行 增强 和 扩充 。 交 互 设计 还 涉及 多 个 学 科 ， 以 及 
交互 设计 领域 人 员 的 沟通 。 


者 交互 设计 的 基本 步骤 @ 


通常 来 说 , 交互 设计 都 会 遵循 类 似 如 下 的 步骤 进行 设计 ， 为 特定 的 设计 问题 提供 某 个 解决 方案 。 
交互 设计 的 一 般 步 骤 包 括 以 下 7 个 。 


(1) 通过 用 户 调研 了 解 用 户 及 其 相关 的 使 用 场景 ， 以 便 对 其 有 深刻 的 认识 ( 主要 包括 用 户 使 用 时 的 心理 
用 户 调研 
(2) 


@@ 部 


盐 可 


模式 和 行为 模式 )， 从 而 为 后 续 设计 提供 良好 的 基础 。 

于 
通过 综合 考虑 用 户 调研 的 结果 、 技 术 可 行 性 以 及 商业 机 会 ， 为 交互 设计 的 目标 创建 概念 (目标 可 能 
是 新 的 软件 、 产 品 、 服 务 或 系统 )。 整 个 过 程 可 能 来 加 迭代 进行 多 次 ， 每 个 过 程 可 能 包含 头脑 风暴 、 
交谈 、 细 化 概念 模型 等 活动 。 


于 
基于 用 户 调研 得 到 的 用 户 行为 模式 ， 设 计 师 创建 场景 或 者 用 户 故事 来 描绘 设计 中 产品 将 来 可 能 的 形 
加 了 于: 江 二 二 训 态 。 通 常设 计 师 设计 用 户 模型 来 作为 创建 场景 的 基础 。 
可 


| 


After Effects CC 移动 网 站 UI 交互 动 效 设计 全 程 揭秘 


交互 设计 师 通常 需要 绘制 界面 流程 图 ， 用 于 描述 系统 的 操作 流程 。 
可 


国 交互 设计 师 通过 设计 原型 来 测试 设计 方案 。 原 型 大 致 可 以 分 为 3 类 : 功能 测试 原型 、 感 官 测试 原型 
和 实现 测试 原型 。 总 之 ， 这 些 原型 用 于 测试 用 户 和 设计 系统 交互 的 质量 。 

v 
交互 设计 师 需 要 参与 方案 的 实现 ， 从 而 确保 方案 实现 是 严格 忠于 原来 的 设计 的 ; 同时， 也 要 准备 进 
行 必要 的 方案 修改 ， 从 而 确保 不 伤害 原 有 设计 的 完整 概念 。 

4 
系统 实现 完毕 的 测试 阶段 ， 可 以 通过 用 户 测试 发 现 设计 的 缺陷 ， 设 计 师 需要 根据 情况 对 方案 进行 合 
理 修改 。 


fe 用户 体验 概述 ©@, 

用 户 体验 是 用 户 在 使 用 产品 或 服务 的 过 程 中 建立 起 来 的 一 种 纯 主观 的 心理 感受 。 从 用 户 的 角度 
来 说 ， 用 户 体验 是 产品 在 现实 世界 的 表现 和 使 用 方式 ， 渗 透 到 用 户 与 产品 交互 的 各 个 方面 ， 包 括 用 
户 对 品牌 特征 ， 信 息 可 用 性 、 功 能 性 、 内 容 性 等 方面 的 体验 。 不 仅 如 此 ， 用 户 体验 还 是 多 层次 的 ， 
并 且 贯 穿 于 人 机 交互 的 全 过 程 ， 既 有 对 产品 操作 的 交互 体验 ， 又 有 在 交互 过 程 中 触发 的 认 知 、 情 感 
体验 ， 包 括 享受 、 美 感 和 娱乐 。 从 这 个 意义 上 来 讲 ， 交 互 设计 就 是 创建 新 的 用 户 体验 的 设计 。 


用 户 体验 设计 的 范围 很 广 ， 而 且 在 不 断 地 扩张 ， 关 于 用 户 体验 概念 的 定义 有 多 重 描 述 ， 不 同 领域 的 人 有 不 同 的 


用 户 体验 这 一 领域 的 建立 ， 正 是 为 了 全 面 地 分 析 和 透视 一 个 人 在 使 用 某 个 产品 、 系 统 或 服务 时 
的 感受 ， 其 研究 的 重点 在 于 产品 、 系 统 或 服务 给 用 户 带 来 的 愉悦 度 和 价值 感 ， 而 不 是 其 性 能 和 功能 
的 表现 。 


到 1 用 户 体验 的 5 个 层面 @@ 


很 多 人 都 曾经 有 过 在 手机 App 上 购物 的 经 历 ， 这 i 
种 过 程 几乎 是 一 样 的 ,访问 购物 App 软件 ， 使 用 站 内 搜 表现 层 
索引 擎 或 者 分 类 目录 寻找 想 要 购买 的 商品 ， 选 择 付款 方 


式 并 输入 快递 地 址 ， 然 后 购物 ，App 则 保证 将 商品 递送 
到 客户 的 手中 。 


这 个 清晰 、 有 条 不 亲 的 体验 ， 事 实 上 由 一 系列 完整 

的 决策 组 成 的 App 界 面 看 起 来 是 什么 样 ? 它 如 何 运转 ? PA 

它 能 让 用 户 做 什么 ? 这 些 决 策 彼此 依赖 ， 告 知 并 影响 用 

户 体验 的 各 个 方面 。 如 果 去 掉 这 些 体验 的 外 壳 ， 就 可 以 

清晰 理解 这 些 决策 是 如 何 做 出 来 的 了 。 范围 层 
为 了 明确 用 户 体验 的 整个 过 程 ， 我 们 从 网 络 交互 最 

基本 的 形式 一 界面 设计 入 手 分 析 用 户 体验 的 要 素 ， 将 

用 户 体验 的 要 素 总 结 为 5 个 层面 :战略 层 、 范 围 层 、 结 

构 层 、 框 架 层 和 表现 层 ， 并 从 每 一 个 层面 包含 的 子 要 素 本 

入 手提 出 符合 用 户 体验 的 设计 原则 ， 如 1-7 所 示 。 


[到 


Et 
1. 表现 层 


表现 层 主要 是 界面 的 视觉 效果 设计 。 在 表现 层 中 , 我 们 看 到 的 是 一 系列 的 界面 , 这 些 界面 由 图 片 、 
文字 和 音乐 等 多 媒体 元 素 构成 。 一 些 图 片 可 能 是 可 以 点 击 的 ， 会 执行 某 种 功能 ， 例 如 一 个 购物 车 的 
图 标 ， 会 把 用 户 带 到 购物 车 页 面 ， 而 有 些 图 片 可 能 仅仅 是 装饰 而 已 。 文 字 信 息 也 是 如 此 ， 有 一 些 可 
能 会 有 超 链 接 。 如 图 1-8 所 示 为 界面 上 的 各 种 元 素 。 


使 用 相同 风 | 
格 、 不 同 颜 | 
色 的 功能 图 
标 设计 , 非 | 
常 方便 用 户 | 
的 区 分 和 点 | 


击 操作 


移动 应 用 界面 的 视觉 设计 其 实 也 是 一 种 信息 的 表达 ， 充 满 美感 的 应 用 界面 会 让 用 户 从 潜意识 中 青睐 它 ， 甚 至 于 忘 i 
时 间 成 本 和 它 “ 相 处 ”， 同 时 加 深 了 用 户 对 品牌 的 再 度 认 知 。 而 由 于 每 个 人 的 审美 观念 不 太 相同 ， 因 此 必须 面向 目 
界面 的 视觉 效果 。 


在 表现 层 下 面 是 框架 层 ， 框 架 层 利用 按钮 、 控 件 、 照 片 和 文本 区 域 位 置 等 元 素来 优化 界面 的 设 
计 布 局 ， 使 这 些 元 素 的 使 用 达到 最 大 化 的 效果 和 效率 ， 确 定 很 详细 的 界面 外 观 、 导 航 和 信息 设计 ， 
1-9 所 示 。 


国 


| 个 人 账户 资金 损失 保险 司 ! 
1 ww 23.00u | 
| ! 
一 年 期 综合 意外 险 司 ! 
= oN 风 。 130 358 御 1! 
'E ww *23,00e | 


工具 栏 


在 框架 层 中 主要 是 对 界面 中 不 同 的 内 容 区 域 进行 划分 , 确定 界面 的 布局 ， 从 而 方便 对 界面 的 视觉 表现 效果 进行 设计 。 
! 合理 布局 对 于 移动 端 界面 的 设计 尤为 重要 ， 一 般 来 说 ， 移 动 设备 显示 屏 的 尺 十 有限， 布局 合理 、 流 畅 会 使 视线 “ 融 
1 会 贯通 ”， 也 可 间接 帮助 用 户 找到 自己 关注 的 对 象 。 


骸 
前 
党 
ll 
加 
冯 


屋 ， 框 架 是 结构 的 具体 表现 方式 。 框 架 层 设 定 界面 中 交互 元 素 的 位 置 ， 而 


| 
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结构 层 则 用 来 设计 用 户 如 何 达 到 某 个 页 面 ， 以 及 访问 结束 后 能 够 去 到 哪里 。 框 架 层 定义 了 导航 栏 中 
各 要 素 的 排列 方式 ， 人 允许 用 户 可 以 浏览 不 同 的 分 类 ， 而 结构 层 则 确定 哪些 类 别 应 该 出 现在 哪里 ， 如 
图 1-10 所 示 。 
到 单 击 可 以 返 加 和 | 
该 年 份 列 表 中 


1<20141! 


高 亮 显 
示 当 前 
的 日 期 

可 以 通过 手 

指 在 屏幕 中 

滑动 ， 来 滚 

的 年 从 | 


结构 层 主要 用 于 表现 用 户 如 何 到 达 某 个 页 面 ， 以 及 当前 所 在 的 位 置 。 

日 历 具有 较 深 的 层级 ， 当 用 户 在 翻阅 年 、 月 、 日 时 ， 增 强 的 转 场 动 画 效果 能 够 给 用 户 一 种 层级 纵深 感 。 在 滚动 年 份 
视图 时 ， 用 户 可 以 即时 看 到 今天 的 日 期 以 及 其 他 日 历任 务 ， 如 左 图 所 示 。 当 用 户 选择 了 某 个 月 份 ， 年 份 视图 会 局 部 
放大 该 月 份 ， 过 渡 到 月 份 视图 。 今 天 的 日 期 依然 处 于 高 亮 状态 ， 年 份 会 显示 在 返回 按钮 处 ， 这 样 用户 可 以 清楚 地 知 
道 当 前 的 位 置 ， 从 哪里 进来 以 及 如 何 返回 ， 如 中 图 所 示 。 类 似 的 过 渡 动 画 还 出 现在 用 户 选择 某 个 日 期 时 ， 月 份 视图 
a et ttn en 如 右 图 所 示 。 这 些 交互 
1 动画 都 增强 了 年 、 月 、 日 


} 动 显 示 不 同 


结构 层 确定 App 应 用 软件 各 种 特性 和 功能 最 合适 的 组 织 方 式 ， 而 所 有 这 些 特 性 和 功能 就 构成 了 
App 软件 的 范围 层 。 例 如 ， 大 多 数 电 商 App 都 提供 了 这 样 一 个 功能 ， 就 是 用 户 可 以 保存 以 前 的 收 货 
地 址 ， 这 样 当 用 户 再 次 购买 商品 时 可 以 直接 使 用 所 保存 的 地 址 ， 这 个 功能 就 属于 “范围 层 ” 要 解决 
的 问题 。 如 图 1-11 所 


| 标题 栏 左 侧 图 标 
| 运用 清晰 直观 的 人 可 以 切换 出 侧 滑 | 
| 物 图 片 与 简洁 的 文 菜单 ， 右 侧 放大 
| 字 来 表现 商品 分 类 镜 图 标 可 以 切换 | 
| 到 搜索 界面 ， 购 | 
! 合 不 同人 群 的 商 物 车 图 标 则 可 以 
1 品 不 仅 使 用 了 针对 快速 进入 购物 车 | 
! 性 的 人 物 图 片 ， 并 界面 ， 方 便 用 户 | 
| 且 背 景 颜 色 也 不 相 的 操作 | 
同 ， 非 常 直观 


| 简单 来 说 ， 范 定 界面 中 所 包含 的 内 容 和 功能 。 例 如 ， 服 饰 关 电 商 App 中 包含 几乎 所 有 电 商 App 都 有 ; 
! 的 功能 , 突出 而 明确 的 商品 分 类 , 为 促销 信息 使 用 特殊 的 颜色 在 界面 中 进行 突出 表现 , 在 标题 栏 的 中 间 放 置 界面 标题 ， 


左 侧 为 该 App 应 用 的 侧 滑 菜单 功能 图 标 ， 右 侧 为 搜索 功能 图 标 ， 当 然 每 一 个 功能 中 还 包含 很 多 细节 的 功能 体现 ， 这 
围 层 中 需要 考虑 到 的 。 


5. 战略 层 


成 功 的 用 户 体验 ， 其 基础 是 一 个 被 明确 表达 的 战略 。 这 些 战 略 不 仅 包括 App 应 用 软件 经 营 者 想 
从 App 软件 中 得 到 什么 ， 还 包括 用 户 想 从 App 应 用 软件 中 得 到 什么 。 例 如 电 商 App， 一 些 战略 目标 
是 显而易见 的 : 用 户 想 买 到 商品 ，App 应 用 想 卖 出 商品 。 另 一 些 目标 可 能 并 不 是 那么 容易 说 清楚 ， 
例如 促销 信息 等 。 

战略 层 决定 了 App 应 用 的 定位 ， 由 用 户 需求 和 产品 目标 决定 。 用 户 需求 是 交互 设计 的 外 在 需求 ， 
包括 美观 、 技 术 、 心 理 等 各 方面 ， 可 以 通过 用 户 调查 的 方式 获得 。 产 品目 标 则 是 设计 师 和 设计 团队 
对 整个 产品 功能 的 期 望 和 目标 的 评估 ， 如 图 1-12 所 示 。 


这 是 一 个 服饰 类 购物 App 应 用 软件 ， 其 目的 非常 单纯 和 明确 就 是 通过 向 用 户 推荐 精 选 的 服饰 商品 ， 从 而 促进 用 户 ， 
买 。 而 用 户 则 可 以 通过 该 App 了 解 到 最 新 的 商 从 而 为 自己 的 购物 多 一 种 选择 的 可 能 性 。 


战略 、 范 围 、 结 构 、 框 架 和 表现 这 5 个 层面 中 ， 每 一 层 需要 处 理 的 问题 既 有 抽象 的 ， 也 有 具体 的 。 在 最 下 面 的 
战略 层 , 设计 者 不 需要 考虑 产品 或 者 服务 最 终 的 表现 形式 ,而 要 关心 产品 如 何 满足 用 户 的 需求 。 在 最 上 面 的 表现 层 ， 
则 只 需要 关心 产品 所 呈现 的 具体 细节 。 随 着 层面 的 上 升 ， 我 们 要 做 的 决策 会 逐渐 从 抽象 变 得 具体 。 


这 5 个 层面 定义 了 用 户 体验 的 基本 架构 ， 并 且 由 “连锁 效应 ”相互 联系 与 制约 ， 即 每 一 个 层 五 
都 是 由 它 上 面 的 那个 层面 来 决定 的 。 所 以 表现 层 由 框架 层 决定 ， 框 架 层 则 建立 在 结构 层 的 基础 上 ， 
结构 层 又 受到 范围 层 的 影响 ， 范 围 层 则 根据 战略 层 来 设计 。 在 每 一 个 层面 中 ， 用 户 体验 的 要 素 必须 
相互 作用 才能 完成 该 层面 的 目标 ， 并 且 一 个 要 素 可 能 影响 同一 个 层面 中 的 其 他 要 素 。 


通过 以 上 5 个 层面 及 子 要 素 的 划分 ， 用 户 体验 不 再 是 一 个 抽象 的 概括 的 理念 ， 而 是 具体 的 可 触 控 的 设计 方针 。 
用 户 体验 贯穿 于 交互 设计 的 各 个 方面 ， 在 指导 交互 设计 的 同时 也 受到 交互 设计 的 影响 。 


用户 体验 的 需求 层次 


随 着 互联 网 的 发 展 ， 网 络 从 最 初 的 简单 信息 传递 发 展 到 交互 式 的 互动 平台 ， 一 直到 现在 的 以 用 
户 体验 为 核心 的 发 展 模式 。 可 以 说 这 一 切 改变 都 是 以 用 户 需求 为 核心 在 转变 的 ， 有 需求 才 有 改变 ， 
就 像 马 斯 洛 的 需求 层次 理论 所 描述 的 那样 。 任 何 一 个 东西 ， 发 展 到 一 定 程度 就 会 有 一 个 质 的 飞跃 ， 
量变 引起 质变 。 当 然 ， 这 个 世界 发 生变 化 的 不 仅仅 是 眼睛 所 能 看 到 的 ， 在 看 不 到 时 ， 发 展 和 变化 是 
绝对 存在 的 。 例 如 ， 对 于 搜索 引擎 优化 来 说 ， 不 仅仅 是 关键 词 的 部 署 和 堆积 ， 也 不 是 外 链接 多 与 少 


| 


的 问题 ， 在 这 些 最 简单 的 基础 之 上 ， 良 好 的 用 户 体验 都 是 每 个 交互 设计 师 津津 
在 马 斯 洛 关 于 人 的 5 个 需求 层次 的 基础 上 , 互联 网 产品 的 用 户 体验 同样 


从 低 至 高 分 别 是 感觉 需求 、 交 互 需求 、 情 感 需求 、 社 会 需求 和 自我 需求 ， 如 图 
个 
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乐 道 的 事情 。 


以 分 为 5 个 需求 层次 ， 


的 
因 


1-13 所 示 。 


户 体验 设计 


户 第 一 次 接触 到 某 产品 时 ， 其 外 观 体验 就 可 能 会 成 为 决定 产品 是 否 吸引 


户 的 重要 


， 创 造 良好 的 情感 体验 ， 如 图 1-14 所 示 。 


使 用 不 同色 相 的 
小 面积 色彩 在 界 
面 中 表现 不 同 的 
选项 , 非常 直观 、 
清晰 


面 进行 细致 的 分 析 ， 突 出 产品 


品 更 具有 体验 价值 ， 最 直接 的 办 法 就 是 增加 某 些 感官 体验 要 素 ， 增 强 用 户 与 产品 互 
相交 流 的 感觉 。 因 此 ， 设 计 师 必 须 从 视觉 听觉、 触觉 等 广 
使 其 容易 被 感 和 


的 感官 特征 ， 


;在 该 App 应 用 界面 设 : 
; 计 中 ， 使 用 模糊 处 理 ! 
; 的 运动 人 物 图 像 作为 界 ; 
; 面 的 背景 ， 非 常 直观 地 
| 突出 表现 该 App 应 用 | 
| 的 特征 。 背 景 的 明度 较 
; 低 ， 在 界面 中 使 用 多 种 | 
| 不 同色 相 的 鲜艳 色彩 来 | 
| 表现 不 同 的 选项 ， 能 够 | 
;使 用 户 明确 区 分 不 同 的 ， 


;内容 ， 从 而 有 效 突出 界 ; 


; 面 中 重要 信息 的 表现 。 | 


在 满足 基本 的 感官 需求 后 ， 用 户 与 产品 之 间 交 互 的 可 能 性 即 交 互 需 求 。 交 互 需求 是 人 与 产品 或 


者 系统 交互 过 程 中 的 需求 ， 包 括 完成 人 有 


用 性 而 


E 务 的 时 间 、 效 率 ， 是 否 顺 利 、 是 否 出 错 、 是 否 有 帮助 等 。 可 


究 关注 的 是 用 户 的 交互 需求 , 包括 产品 在 操作 时 的 学 习性 、 效率、 记忆 性 、 容 错 率 和 满意 度 等 。 


交互 需求 关注 的 是 交互 过 程 是 否 顺畅 , 用 


是 否 可 以 简单 、 高 效 地 完成 他 们 的 任务 ， 如 


图 


1-15 所 示 。 


yo St 


; 在 该 音乐 播放 App 界面 中 ， 为 

; 用 户 的 交互 操作 给 予 了 明确 的 指 ; 
| 示 。 首 先 各 播放 控制 图 标 运用 了 | 
; 通俗 易 懂 的 简洁 风格 表现 ， 并且; 


: 通过 色彩 与 时 间 文字 相 结 合 的 广 
| 式 来 提示 播放 进度 ， 而 功能 开关 ! 
; 按钮 则 通过 不 同 的 色彩 来 区 分 开 ; 
; 启 和 关闭 的 状态 ， 这 样 在 用 户 的 ; 
; 交互 操作 过 程 中 非常 易 理解 、 易 ; 
作 。 


情感 需求 是 用 户 在 使 用 产品 或 系统 过 程 中 所 产生 的 情感 ， 如 从 产品 本 身 和 使 用 过 程 中 感受 到 关 
爱 、 互 动 和 乐趣 。 情 感 强调 产品 的 设计 感 、 故 事 感 、 娱 乐 感 和 意义 感 ， 产 品 本 身 要 具有 吸引 力 、 动 
人 以 及 有 趣 ， 如 图 1-16 所 示 。 
一 这 是 移动 端的 益 智 游戏 界面 设计 ， 可 ; 
爱 的 卡通 形象 与 出 色 的 交互 设计 相 结 
合 ， 使 界面 更 加 生动 形象 ， 具 有 很 强 ! 
的 设计 感 和 娱乐 感 ， 使 人 们 在 游戏 过 ; 
程 中 感受 到 互动 与 乐趣 。 通 过 出 色 的 | 
视觉 效果 设计 , 有 效 吸引 用 户 的 关注 。; 


图 1-16 
4. 社会 需求 


在 基本 的 感觉 需求 、 交 互 需求 和 情感 需求 得 到 满足 后 ， 用 户 需要 追求 更 高 层次 的 需求 ， 往 往 钟 
情 于 某 些 品牌 产品 ， 而 这 些 品牌 也 需要 社会 的 认可 。 例 如 ， 必 胜 客 是 西式 快餐 品牌 中 的 佼佼 者 ， 受 
x 坦 崇 


是 “必胜客 ”在 移动 端 


推 
在 一 起 ， 带领 用 户 逐 步 了 解 该 新 产品 的 原料 以 及 创作 手法 ， 怎么 能 不 唤醒 用 户 春天 ; 
欲 动 的 心 呢 。 1 
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5. 自我 需求 


自我 需求 是 指 产品 如 何 满足 自我 个 性 的 需要 ， 包 括 追求 新 奇 、 个 性 和 张扬 的 自 我 实现 等 。 对 于 产 
需要 进行 个 性 化 定制 设计 或 者 自 适应 设计 , 


该 App 应 用 界面 
使 用 不 同 颜色 的 矩 ， 的 矩形 色 块 拼接 作为 界面 的 背景 ， 在 
形 色 块 相互 拼接 ， 界面 中 形成 多 个 小 方块 ， 在 每 个 矩形 
使 各 部 分 信息 内 容 ， 色 块 中 放置 相应 的 内 容 ， 对 界面 中 的 ; 
非常 明确 、 清 晰 ” ' 内 容 进行 有 效 区 分 ， 使 界面 的 信息 表 
! 现 非常 明确 ， 并 且 这 种 色 块 拼接 的 色 ! 


! 彩 搭配 也 能 够 给 人 带 来 一 种 新 鲜 感 ， | 
! 突出 表现 该 App 应 用 界面 的 个 性 化 。 ! 


在 产品 设计 过 程 中 ， 基 于 用 户 体验 的 需求 层次 ， 我 们 才能 有 的 放 矢 ， 打 造 良 好 的 用 户 体验 ， 但 
这 不 像 程序 代码 那样 有 固定 的 模式 ， 我 们 需要 去 了 解 、 观 察 、 洞 悉 用 户 的 习惯 和 心理 ， 而 这 仅仅 只 
是 基础 。 


用 户 体验 不 是 嘴 上 说 出 来 的 , 在 一 个 项 目 或 网 站 建立 之 初 , 就 应 该 做 一 个 全 方位 的 问卷 调查 , 看 看 需求 的 程度 ， 


是 否 这 是 值得 做 的 事情 ， 也 就 是 所 谓 的 可 行 性 分 析 报 告 。 除 此 之 外 ， 还 需要 细 分 用 户 群 体 ， 最 后 将 方案 转化 为 行 之 
有 效 的 执行 力 。 当 然 ， 在 实际 应 用 中 还 有 具体 的 用 户 体验 挖掘 及 应 用 


至 习 交互 设计 与 用 户 体 验 的 天 系 一 @ 


移动 设备 的 交互 体验 是 一 种 "自助 式 " 的 体验 , 没有 可 以 事先 阅读 的 说 明 书 , 也 没有 任何 操作 培训 ， 
完全 依靠 用 户 自己 去 寻找 互动 的 途径 。 即 便 被 困 在 某 处 ， 也 只 能 自己 想 办 法 ， 因 此 交互 设计 极 大 地 影 
响 了 用 户 体验 。 好 的 交互 设计 应 该 尽量 避免 给 用 户 的 参与 造成 任何 困难 ， 并 且 在 出 现 问题 时 及 时 提醒 
用 户 并 帮助 用 户 尽快 解决 ， 从 而 保证 用 户 的 感官 、 认 知 、 行 为 和 情感 体验 的 最 佳 化 ， 如 图 1-19 所 示 。 

反 过 来 ， 用 户 体验 又 对 交互 设计 起 着 非常 重要 的 指导 作用 ， 用 户 体验 是 交互 设计 的 首要 原则 和 
检验 标准 。 从 了 解 用 户 的 需求 入 手 ， 到 对 各 种 可 能 的 用 户 体验 的 分 析 ， 再 到 最 终 的 用 户 体验 测试 ， 
交互 设计 应 该 将 对 用 户 体验 的 关注 中 穿 于 设计 的 全 过 程 。 即 便 是 一 个 小 小 的 设计 决策 ， 设 计 师 也 应 
户 体验 的 角度 去 思考 。 


! 这 是 某 闵 钟 移动 App 的 交 ， 
开关 按钮 同样 ! 互 效果 ， 图 形 化 的 时 针 表 ; 
通过 颜色 表现 盘 设计 引导 用 户 设 定时 闪 ， 


钟 时 间 ， 而 在 闹钟 列表 界 
面 中 ， 又 通过 不 同 的 色彩 、 
不 同 的 背景 颜 ; 小 图 标 等 为 用 户 提供 非常 ， 
色 表 现 信息 的 清晰 的 指引 。 ! 
不 同 状态 ， 深 
色 背 景 为 当前 
选中 状态 


出 不 同 的 状态 


Et 


卫星 空位 


触摸 屏 、 多 点 触 控 、 定位 、 摄 像 头 、 重 力 感应 ， 


标准 配置 ， 这 些 标准 配置 极 大 地 改变 了 移动 端的 用 户 体验 。 


这 些 几乎 都 成 为 当前 智能 移动 通信 设备 的 


触摸 拆 掉 了 人 与 数字 世界 之 间 的 障碍 ， 操 控 行为 从 间接 变 成 了 直接 ， 触 措 
\ 就 可 能 是 通过 父母 的 触摸 式 移动 设备 来 体验 数字 
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字 世 界 的 交互 方式 ， 而 且 在 不 断 演变 。 孩 子 从 / 
界 的 ， 这 也 将 决定 其 未 来 的 交互 方式 。 

随 着 用 户 以 触摸 的 方式 来 与 数字 服务 互 翅 
舞台 , 内 容 本 身 (文件 、 图片 、 视 频 等 ) 正成 为 新 的 
成 为 主流 的 审美 观念 ， 对 用 户 的 手指 行为 产生 反应 。 

卫星 定位 让 随时 随地 告知 系统 用 户 身 处 位 
信息 推送 或 本 地 化 社会 交互 ， 增 强 在 特定 时 空 的 

移动 互联 网 设备 上 的 摄像 头 不 仅 可 以 随时 
源头 ， 双 向 摄像 头 的 大 规模 应 用 还 广泛 用 于 
于 通信 设施 进行 情感 沟通 的 体验 ， 在 视频 电话 和 视频 会 
的 真实 现 验 设 计 追 求 的 最 高 目标 。 如 图 


户 个 性 化 服务 体验 。 


SETTINGS 


， 我 们 目前 所 熟悉 的 UI( 按钮 、 


处 成 为 可 能 ， 从 而 可 以 设计 出 各 种 借助 于 地 


中 方便 用 户 捕获 影像 信息 ， 大 大 丰富 
的 交流 与 交互 ， 这 大 大 改善 了 非 现场 的 人 们 


议 相 关 的 应 用 场景 设计 中 ， 


屏 是 更 为 自然 的 与 数 


到 标 、 菜 单 ) 


了 影像 


会 退出 
用 户 交互 方式 , 内 容 本 身 将 逐渐 占据 移动 设备 屏幕， 


理 位 置 的 


风 信 息 
借 


增强 用 户 面对面 


| 。 使 用 不 同 颜色 、 统 一 设计 
~ 尾 一 风格 的 图 标 为 用 户 提供 

| 。 多 种 交流 与 沟通 的 形式 ， 
、 视 频 等， 


其 中 包括 语音 
极 大 地 提升 了 移动 端的 


1-20 所 示 为 顺应 发 展 趋势 的 功能 。 


了 


用 


移动 设备 也 有 其 局 限 性 , 例如 体积 小 、 


面临 在 用 户 体验 和 无 线 网 络 限制 之 间 寻 求 一 个 平衡 。 


电能 有 限 , 无线 网 络 不 稳定 , 而 且 每 个 用 户 所 能 下 载 的 数据 量 也 有 限制 ， 
用 户 在 移动 设备 上 的 耐心 是 很 低 的 。 这 些 局 限 的 改变 需要 多 年 的 技术 和 经 济 发 展 才能 解决 ， 因 此 ， 如 今 移动 端 设 计 


另 一 个 发 展 趋势 就 是 : 单个 设备 控制 多 个 屏幕 ， 这 个 趋势 有 着 两 个 发 展 方向 。 第 一 ， 


减少 ， 这 样 在 单一 设备 会 出 现 多 个 屏幕 。 第 二 ， 就 是 把 内 容 从 手机 上 转移 至 其 
多 个 数字 接 入 点 的 结合 大 了 


PC、TV 等 。 这 一 发 展 趋势 所 带 来 的 变化 就 是 1+1>2， 
设备 的 综合 。 

这 些 趋势 对 于 目前 的 
屏幕 多 用 户 时 代 的 设计 做 好 准备 。 


用 户 体验 设计 都 是 挑战 ， 所 以 用 户 体验 设计 师 必 须 不 停 地 学 习 ， 从 


屏幕 耗 电 
他 设备 ， 例 如 无 线 
于 各 个 数字 


i 为 多 


NEE 
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很 多 人 在 刚 接触 动 效 设计 时 ， 只 是 觉得 新 鲜 、 好 玩 ， 可 以 炫 技 ， 可 以 使 UI 设计 看 上 去 更 加 酷 炫 。 
但 是 这 是 在 交互 设计 中 加 入 动 效 设 计 的 目的 吗 ? 当然 不 是 。 

要 解决 为 什么 要 在 UI 交互 设计 中 加 入 动 效 设计 这 个 问题 ， 就 需要 搞 清楚 什么 是 动 效 设计 ? 以 及 
动 效 设计 的 作用 是 什么 ? 


总 半  U| 动 效 的 发 展 
在 扁平 化 设计 兴起 之 后 ，UI 动 效 的 设计 应 用 越 来 越 多 。 扁 平 化 设计 的 好 处 在 于 用 户 的 注意 力 可 
以 集中 在 界面 的 核心 信息 上 ， 将 对 用 户 无 效 的 设计 元 素 去 掉 ， 不 被 设计 所 打扰 而 分 散 注意 力 ， 使 用 
户 体验 更 加 纯粹 自然 。 这 个 思路 是 对 的 ， 回 归 了 产品 设计 的 本 质 ， 就 是 为 用 户 提供 更 好 的 使 用 体验 ， 
其 次 才 是 精美 的 界面 设计 。 但 是 ， 过 于 扁平 化 的 设计 ， 也 会 带 来 新 的 问题 ， 一 些 复杂 的 层级 关系 如 
何 展 现 ?” 用 户 如 何 被 引导 和 吸引 ? 这 与 用 户 在 现实 世界 中 的 自然 感受 很 不 一 致 ， 所 以 Google 推出 了 
Material Design 设计 语言 。 


扁平 化 设计 的 核心 是 在 设计 中 气 弃 高 光 、 阴 影 、 纹 理 和 渐变 等 装饰 性 效果 ， 通 过 符号 化 或 简化 的 图 形 设计 元 素 
来 表现 。 在 扁平 化 设计 中 去 除了 元 余 的 效果 ， 其 交互 核心 在 于 突出 功能 和 交互 的 使 用 。 


Material Design 设计 语言 的 一 部 分 作用 是 为 了 解决 过 于 扁平 化 设计 所 带 来 的 整 端 ， 复 杂 层级 关 
系 如何 展 现 ， 用 户 如何 被 引导 和 代入 。 为 了 解决 这 个 问题 ， 在 Material Design 设计 语言 中 充分 利用 z 
轴 ， 通 过 分 层 设计 和 动 效 设计 相 结 合 的 方式 ,在 扁平 化 的 基础 上 为 用 户 提供 更 容易 理解 的 层级 关系 ， 
赋予 设计 以 情感 ， 增 强 用 户 在 产品 使 用 过 程 中 的 参与 度 ， 如 图 1-21 所 示 。 


ix im: 


;这 是 一 款 基于 Material Design 设计 语言 所 设计 的 移动 端 应 用 App 界面 ， 在 该 界面 中 多 处 加 入 动 效 设计 ， 从 而 使 界面 的 ， 
! 操作 表现 更 加 流畅 。 在 界面 中 通过 悬浮 按钮 设计 扩展 操作 ， 替 代 了 单一 的 交互 ， 当 用 户 单 击 该 悬浮 工具 按钮 时 ， 相 关 | 
1 的 操作 按钮 将 会 以 动画 的 形式 出 现在 界面 中 。 导航 菜单 也 采用 了 侧 滑 的 交互 动画 形式 , 单 击 界面 左上 角 的 “菜单 ”图 标 ，; 
1 隐藏 的 导航 菜单 会 从 界面 左 侧 滑 入 ， 与 此 同时 ，“ 莱 单 ”图 标 会 变形 为 “返回 ”图 标 ， 单 击 即 可 侧 滑 隐藏 导航 菜单 。 


Et 


在 Material Design 设计 规范 中 ， 将 动 效 设计 命名 为 Animation， 意 思 是 动画 、 活 泼 。 动 效 设 计 可 
以 被 定义 为 使 用 类 似 动画 的 手法 ， 赋 予 UI 界面 生命 和 活力 。 


2 动 效 在 UI 交互 设计 中 的 作用 一 @ 
为 什么 需要 在 UI 交互 中 加 入 动 效 设计 呢 ? 除了 能 够 给 用 户 带 来 酷 炫 的 视觉 效果 外 ， 交 互 中 的 动 
效 设计 在 用 户 体验 中 其 实 发 挥 着 很 重要 的 作用 。 


1. 吸引 用 户 注 意 力 


人 类 天 生 就 对 运动 的 物体 格外 注意 ， 因 此 UI 界面 中 的 动态 交互 效果 自然 是 吸引 用 户 注 意 力 的 
和 
也 更 美观 一 22 所 示 。 


通过 动态 效果 吸引 用 
户 注意 ， 同时 也 在 引 


0 唯一 
“滑动 解锁 ”提示 文字 从 左 向 中 运动 的 高 光 ， 这 种 动 
i 


在 iOS 系统 中 当 用 户 轻 触 Safari 的 地 址 栏 

了 3 个 变化 : 中 地 址 栏 变 窗 ， 右 侧 出 现 取消 按钮 ; @ 界 
面 中 出 现 书签 ，(@) 界 面 下 方 弹出 键盘 。 这 几 个 动画 中 ， 
幅度 最 大 的 动作 是 弹出 键盘 ， 从 而 把 用 户 的 注意 力 吸引 
到 键盘 上 ， 有 利于 接 下 来 要 进行 的 操作 。 
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2. 为 用 户 提供 操作 反馈 


在 智能 移动 设备 的 屏幕 上 点 按 虚拟 元 素 ， 不 像 按 下 实体 按钮 一 样 能 够 感觉 到 明确 的 触觉 反馈 。 
此 时 ， 动 态 的 交互 效果 就 成 为 一 种 很 重要 的 反馈 途径 。 有 些 动态 效果 反馈 非常 细微 ， 但 是 组 合 起 来 
息 


在 Android Material Design 设 
随 着 用 户 轻 触 呈 现 圆 形 波纹 ， 从 而 给 用 户 带 
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3. 加 强 指向 性 


当 为 移动 界面 设计 页 面 间 的 切换 效果 时 ， 例 如 查看 照片 、 进 入 聊天 等 ， 合 理 的 动态 交互 效果 能 


够 帮助 用 户 建立 很 好 的 方向 感 ， 就 像 设 计 合理 的 公路 和 路 标 能 够 帮助 人 们 认 路 一 样 , 如 图 1-24 所 示 。 


长 版 飞行 员 夹 克 


nc eA 
= EN “3 


和 


和 WB Ey 


pn 个 人 


这 是 一 个 常见 的 商品 列表 界面 ， 当 用 户 轻 触 某 个 商品 图 像 后 ， 图 从 过 市 交 从 置 贡 关 ; 逐渐 过 渡 到 该 商品 的 详细 
信息 界面 。 这 样 就 建立 了 放大 的 图 片 与 列表 中 缩 略 图 的 联系 ， 用 户 能 很 确信 现在 打开 的 图 片 就 是 自己 点 击 的 那 张 。 
! 相应 地 ， 单 击 商品 详细 信息 界面 左上 角 的 “返回 ”图 标 ， 则 该 商品 图 片 逐 渐 缩小 ， 返 回 到 商品 列表 的 位 置 ， 指 引用 
1 户 找到 浏览 的 位 置 。 


这 种 保持 内 容 上 下 文 关系 的 缩放 动态 交互 效果 在 i0S 系统 的 很 多 界面 中 都 能 见 到 , 例如 主屏 幕 的 文件 夹 、 日历、 
相册 和 App 切换 界面 等 。 


4 . 传递 信息 深度 


动态 交互 效果 除了 可 以 表现 元 素 在 界面 上 的 位 置 、 大 小 的 变化 外 ， 还 可 以 用 来 表现 元 素 之 间 的 
层级 关系 。 借 助 陀螺 仪 和 加 速度 传感器 ， 让 界面 元 素 之 间 产 生 微小 的 位 移 从 而 产生 视差 效果 ， 这 样 
可 以 将 不 同 层级 的 元 素 区 分 开 来 。 


通过 以 上 对 动 效 设计 作用 的 分 析 ， 我 们 应 该 认识 到 ， 不 能 把 动 效 作为 让 产品 酷 炫 的 手段 ， 也 不 能 把 它 当 作 产 品 


的 某 种 功能 或 者 亮点 。 动 效 是 为 用 户 使 用 产品 的 核心 体验 服务 的 ， 只 有 设计 好 产品 的 核心 体验 ， 并 合理 使 用 动 效 才 
能 最 大 限度 地 发 挥动 效 的 优势 。 


是 交互 。 随 着 移动 互联 网 技 ， 智 能 移动 设 提升 ， 交 互动 
En 


设计 交互 动 效 的 相关 工具 和 表现 方法 。 


最 近 几 年 U 设计 领域 最 大 的 变化 便 是 直 来 越 强调 用 户 休 验 设计 ， 而 在 Web 或 者 移动 pp 中 使 


用 交互 动 效 设计 也 就 成 为 一 大 趋势 。 但 是 ， 需 要 注意 的 是 ， 交 互动 效应 该 是 以 提 
前 提 ， 并 且 以 令 人 觉得 自然 、 含 蓄 的 方式 提供 有 效用 户 反馈 的 一 种 机 制 。 


2 UI 交互 动 效 概述 © 


近 些 年 ， 人 们 对 产品 的 要 求 越 来 越 高 ， 不 再 仅仅 喜欢 那些 功能 全 、 实 用 、 耐 


高 产品 的 可 用 性 为 


用 的 产品 ， 而 是 转 


向 了 产品 给 人 的 心理 感觉 ， 这 就 要 求 我 们 在 设计 产品 时 能 够 提高 产品 的 用 户 体验 。 提 高 体验 的 目的 
在 于 给 用 户 一 些 舒 适 的 、 与 众 不 同 的 或 意料 之 外 的 感觉 。 用 户 体验 的 提高 使 整个 操作 过 程 符合 用 户 
基本 逻辑 ， 使 交互 操作 过 程 顺 理 成 章 ， 而 良好 的 用 户 体验 则 是 用 户 在 这 个 流程 的 操作 过 程 中 获得 的 


便利 和 收获 。 


交互 动 效 作为 一 种 提高 交互 操作 可 用 性 的 方法 ， 越 来 越 受 到 重视 ， 国 内 外 各 大 企业 都 在 自己 的 


Ei AA ee 
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为 什么 现在 的 产品 越 来 越 注 重 动 效 的 设计 ? 我 们 可 以 先 从 人 们 对 产品 元 素 的 感知 顺序 来 看 ， 不 
难看 出 人 们 对 产品 的 动态 信息 感知 是 最 强 的 ， 其 次 是 产品 的 颜色 ， 最 后 才 是 产品 的 形状 ， 也 就 是 说 
动态 效果 的 感知 要 明显 高 于 产品 的 界面 设计 ， 如 图 2-2 所 示 。 


-@:o 


图 2-2 
动 效 是 物体 空间 关系 与 功能 有 意识 的 流动 之 美 ， 适 当 的 动 效 设计 能 够 使 用 户 更 了 解 交 互 。 在 产 
品 的 交互 操作 过 程 中 恰当 地 加 入 精心 设计 的 动 效 ， 能 够 向 用 户 有 效 地 传达 当前 的 操作 状态 ， 增 强 用 
户 对 直接 操纵 的 感知 ， 通 过 视觉 化 的 方式 向 用 户 呈 现 操作 结果 


ee UI 交互 动 效 的 应 用 领域 @ 


一 个 好 的 动 效 设计 应 该 是 自然 舒适、 锦上添花 ， 绝 对 不 是 仅仅 为 了 去 吸引 眼球 ， 生 拉 硬 套 。 
所 以 要 把 握 好 在 交互 过 程 中 动 效 设计 的 轻 与 重 ， 先 考虑 用 户 使 用 的 场景 、 频 率 和 程度 ， 然 后 再 确定 
动 效 的 注目 程度 ， 并 且 还 需要 重视 界面 交互 整体 性 的 编排 。 


1 App 应 用 启动 动 效 


为 了 强化 产品 的 品牌 形象 ， 目 前 很 多 移动 端的 App 应 用 软件 在 启动 时 都 会 加 入 短小 精致 的 启动 
动画 。App 启动 的 动画 大 多 都 比较 短小 ， 因 为 软件 启动 画面 的 时 间 非 常 得， 大 概 只 有 2~3s 的 时 间 ， 
复杂 的 启动 动画 会 导致 界面 过 渡 的 延迟 。 许 多 App 应 用 的 启动 动 效 都 使 用 了 简单 的 变形 动画 表现 ， 
I 出 产品 的 品牌 Logo 表现 ， 如 图 2-3 所 示 。 


和 
; App 应 用 的 启动 画面 动 效 | 
| 设计， 使 用 纯 白 色 的 背景 
! 突出 表现 Logo 的 动 效 ， 非 | 


| 局 刁 【要 ) ; 常 简洁 。Logo 的 动 效 设计 ，| 

| 沪 ' Ef 滴 沪 出行 注 滴 出 行 ， 主要 是 通过 遮 淖 的 形式 ，! 

| ; 逐渐 显示 出 Logo 中 所 有 文 

| | 字 和 图 形 ， 使 用 户 的 注意 | 

: EE Logo 的 表现 上 。 ! 
图 2-3 


无 论 是 网 页 还 是 移动 应 用 都 不 可 避免 地 会 出 现 让 用 户 等 待 的 情况 ， 在 等 待 的 过 程 中 ， 为 了 让 所 
户 知道 他 的 手机 没有 死机 以 及 网 络 是 通畅 的 ， 我 们 应 该 在 这 个 时 候 加 入 一 些 与 主题 相关 的 动 效 设计 
来 提醒 用 户 内 容 正在 加 载 中 ， 如 图 2-4 所 示 。 


ES 


的 页 面 加 载 等 待 动 效 设计 ， 
通过 服饰 元 素 图 标的 动态 
! 变化 ， 体 现 出 该 App 应 用 ， 
的 特点 ， 也 使 加 载 等 待 不 
再 枯燥 。 


移动 pp 应 用 的 操作 反馈 党 党 会 受 到 网 络 状 况 的 影响 ， 在 网 络 状况 不 好 的 情况 下 ， 操 作 反 馈 可 
能 会 出 现 延 迟 ， 这 时 候 就 需要 有 一 个 合理 的 等 待 动 效 ， 为 用 户 提供 适当 的 提醒 ， 如 图 2-5 所 示 。 


! 在 该 App 应 用 中 的 等 待 动 } 
| 效 非常 简单 ， 仅仅 是 3 个 ! 
i 小 圆 点 按 顺序 的 显示 和 隐 
| 藏 ， 即 使 这 样 简单 的 动画 
; 也 能 够 为 用 户 提供 很 好 的 
! 操作 反馈 ， 起 码 让 用 户 知 


en a > eg E 
: ma"™ a ma"™ a Wr™™ ga ; 道 应 用 程序 当前 运行 正常， 


向 和 | 作 结果 。 


: 稍 等 片刻 ， 就 能 够 得 到 操 


在 App 应 用 程序 中 ， 通 常 都 是 采用 下 拉 的 方式 对 界面 内 容 进行 刷新 ， 最 基础 的 刷新 动 效 是 一 
转动 的 圆圈 ， 如 果 可 以 根据 该 App 应 用 的 特点 设计 独特 的 刷新 动 效 ， 是 不 是 能 够 给 用 户 带 来 不 一 样 
的 体验 呢 ? 如 图 2-6 所 示 为 刷新 动 效 设计 。 


这 是 某 移动 电 商 App 首页 ; 
面 的 刷新 动 效 设计 ， 融 入 ! 
女性 时 尚 购物 元 素 ， 当 向 
下 滑动 界面 时 ， 在 界面 项 ; 
部 出 现 一 个 年 轻 女性 走动 
的 动画 效果 ， 用 来 体现 该 
! 移动 App 的 特点 。 还 可 以 ; 
; 根据 运营 需要 在 节日 、 大 
1 型 促销 活动 等 更 新 符合 主 
人 
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; 这 是 某 电 商 App 普通 页 面 ; 
; 的 刷新 动 效 设计 ， 同 样 是 ; 
; 在 向 下 滑动 页 面 时 显示 相 ， 
! 应 的 刷新 动 效 ， 并 且 其 动 
效 的 设计 风格 与 该 App 中 
其 他 交互 动 效 的 设计 风格 
保持 了 一 致 ， 这 种 商品 列 
表 页 面 的 刷新 动态 效果 通 
常 需要 采用 简约 时 尚 的 视 
觉 风格 。 


图 2-6( 续 ) 


列表 的 相关 动 效 主要 包括 列表 的 加 载 动 效 和 列表 内 容 到 底 的 动 效 。 列 表 内 容 加 载 动 效 与 页 面 刷 

edhe, 当 某 个 界面 的 内 容 不 止 一 屏 时 ,通常 我 们 都 会 向 上 滑动 页 面 从 而 浏览 更 多 的 内 容 ， 

滑动 页 面 后 与 内 容 完成 加 载 之 间 可 以 通过 简短 的 动 效 告知 用 户 正在 加 载 更 多 的 内 容 ， 给 用 户 心理 
上 的 记 志 ， 如 图 2-7 所 示 。 


列表 页 面 中 的 内 容 也 不 是 无 限 的 ， 当 页 面 中 的 列表 内 容 已 经 全 部 加 载 ， 用 户 再 次 向 下 滑动 页 面 希 
0 


A 的 商品 列表 ; 
| . 6 ; 界面 中 ， 当 商品 列表 滑动 ; 
年 秒 1 
| 便 ; 到 底部 ， 已 经 没有 新 的 商 ; 


; 品 信息 时 ， 会 出 现 相 应 的 ; 
; 提示 动画 效果 ， 通 过 拟人 ; 
3 Pr ; 语气 的 有 趣 提示 文案 ,给 ; 
< ; 人 轻松 、 有 趣 的 印象 


| 


Ex 


转 场 是 指 产品 中 从 一 个 界面 转换 到 另 一 个 界面 之 间 的 过 渡 ， 具 有 意义 的 转 场 动画 效果 会 降低 产 
品 的 割裂 感 ， 使 产品 界面 的 过 渡 表 现 得 更 加 流畅 、 自 然 ， 如 图 2-9 所 示 。 


在 该 影视 类 App 应 用 界面 
中 ， 主 要 以 电影 海报 的 展 
示 为 主 ， 当 用 户 在 界面 中 
滑动 时 ， 将 通过 类 似 折 又 
展开 的 动画 形式 过 渡 到 下 
一 个 界面 中 ， 过 渡 效 果 自 
然 、 流 畅 ， 并 且 这 个 折 码 
展开 的 动 效 还 能 够 为 用 户 
带 来 很 强 的 立体 空间 感 。 


转 场 过 液 也 是 一 种 非常 
见 的 转 场 动画 形式 。 例如 
该 电 商 App 应 用 ， 当 用 户 
单 击 某 个 商品 图 片 后， 该 
商品 图 片 会 逐渐 放大 过 渡 
到 该 商品 的 详细 介绍 界面 
中 ; 当 单 击 界面 左上 角 的 
“返回 ”按钮 时 ， 商 品 图 
会 逐渐 缩小 过 渡 到 上 一 
级 界面 中 。 


da tt 告 相应 的 气氛 ， 从 而 


国 -arm es 
@ osmare (| 
全 ae 外 ee 


ms ays 


全. swe 塌 hE zone 志 


这 是 一 个 社交 App 的 聊天 界面 ， 当 用 户 给 对 方 发 送 了 二 ; 在 天 气 类 App 应 用 的 背景 中 ， 通 常 也 会 使 用 动态 效果 来 
个 红包 ， 这 时 候 在 界面 中 就 会 同时 出 现 大 量 红包 散落 的 ， 表 现 当 前 的 天 气 状况 ， 给 人 一 种 非常 直观 的 视觉 印象 。 
动画 效果 ， 很 好 地 活跃 了 互动 的 氛围 。 
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7. 其 他 细节 动 效 


除了 上 面 所 介绍 的 常见 的 动 效应 用 ， 在 App 应 用 界面 的 设计 中 还 有 许多 细节 的 地 方 可 以 添加 合 
适 的 动 效 设计 ， 例 如 当 用 户 点 击 界 面 中 的 某 个 操作 图 标 时 ， 该 图 标 以 交互 动 效 的 形式 给 予 用 户 相应 
的 反馈 ， 这 样 就 能 够 为 用 户 提供 更 加 出 色 的 用 户 体验 ， 如 图 2-11 所 示 。 


[ 攻 本 地 要 可 /i -4 
# 米 兰 时 装 周 2016 年 秋冬 ， 半 身 裙 以 千变万化 的 廓 形 演绎 。。“# 米 兰 时 装 周 2016 征 秋冬， 半身 裙 以 千变万化 的 廓 形 演绎 
别致 格调 ， 诠 释 精致 优雅 。 别致 格调 ， 诠 释 精 致 优雅 。 | 
轻 复古 叹 分 享 忆 喜 欢 加 评论 轻 复古 公分 享 多 喜欢 加 评论 | 
| | 
京 致 衣 橱 向 你 推荐 搭配 京 致 衣 柏 向 你 推荐 搭配 


品 性 3 二 
4 I 


# 米 兰 时 装 周 2016 年 秋冬 ， 半 身 裙 以 千变万化 的 廓 形 演绎 # 米 兰 时 装 周 2016 年 秋冬 ， 半 身 裙 以 千变万化 的 廓 形 演绎 
别致 格调 ， 诠 释 精致 优雅 。 别致 格调 ， 诠 释 精致 优雅 。 


轻 复古 吧 分 享 只 言 欢 回 评论 轻 复 古 ~ 分 享 各 喜欢 加 评论 


加 和 下 EE 
| BA 


京 致 衣 顶 向 你 推荐 搭配 京 致 衣 棉 向 你 推荐 播 配 


| 这 是 二 个 在 App 应 用 界面 中 常见 的 “收藏 ”功能 图 标的 交互 动 效 设计 ， 当 用 户 单 击 “ 收 藏 "图标 时 ， 红 色 的 实心 心 ; 
| 形 图 标 会 逐渐 放大 并 蔡 换 默认 状态 下 的 灰色 线 杠 心 形 图 标 ， 就 是 这 样 一 个 简单 的 交互 操作 动 效 ， 能 够 给 用 户 带 来 非 
| 常 明确 的 操作 反馈 。 | 


需要 注意 的 是 ， 过 长 的 、 宛 余 的 动 效 会 影响 用 户 的 操作 ， 更 严重 的 是 还 可 能 引起 用 户 负 面 的 体验 。 所 以 恰 到 好 
处 地 掌握 动 效 的 时 间 长 度 也 是 好 的 动 效 设计 必 备 技能 之 一 。 


交互 动 效 与 Ul 设计 ?2 


交互 界面 中 加 入 动 效 设计 ， 可 以 很 好 地 满足 交互 设计 发 展 的 趋势 ， 大 大 提高 了 界面 的 易 用 性 。 
当 用 户 进 行 了 一 步 操 作 后 ， 会 看 到 操作 的 表现 ， 也 就 是 说 操作 一 步 ， 就 会 得 到 一 步 反 馈 。 在 产品 中 
加 入 动 效 设计 ， 是 产品 对 用 户 操作 进行 的 合理 反馈 ， 其 目的 在 于 提高 其 识别 性 。 


pp 优秀 交互 动 效 的 特点 


优秀 的 交互 动 效 设计 在 用 户 操作 过 程 中 往往 会 被 无 视 ， 而 糟糕 的 交互 动 效 却 迫 使 用 户 去 注意 界 
面 ， 而 非 内 容 本 身 。 

用 户 都 是 带 着 明确 的 目的 来 使 用 App 的 ， 例 如 买 一 件 商品 、 学 习 新 的 知识 、 发 现 新 音乐 ， 或 者 
仅仅 是 寻找 最 近 的 吃饭 地 点 等 。 他 们 不 会 只 为 了 欣赏 精心 设计 的 界面 而 来 ， 实 际 上 ， 用 户 根本 不 在 
意 界 面 设计 ， 而 只 关心 是 否 能 够 方便 地 达到 他 们 的 目的 。 优 秀 的 交互 动 效 设计 应 该 对 用 户 的 点 击 或 
手势 给 予 恰当 的 反馈 ， 使 用 户 能 够 非常 方便 地 按照 自己 的 意愿 去 掌控 应 用 的 行为 ， 从 而 增强 应 用 的 
使 用 体验 ， 如 图 2-12 所 示 。 


区 


和 全 全 到 本 会 外 


! 这 是 某 移动 端 天 气 应 用 的 界面 设计 ， 在 界面 中 不 再 运用 静态 的 背景 与 文字 表现 形式 ， 而 是 采用 了 动态 表现 方式 ， 守 ; 
| 用 动画 效果 来 模拟 不 同 天 气 情况 的 表现 效果 ， 从 而 使 天 气 信息 的 表现 更 加 直观 ， 而 且 也 有 效 地 增强 了 该 天 气 应 用 的 ! 


优秀 的 交互 动 效 设计 具有 如 下 特点 。 
快速 并 且 流 畅 。 

给 交互 以 恰当 的 反馈 。 

提升 用 户 的 操作 感受 。 

人 ”为 用 户 提供 良好 的 视觉 效果 。 


oo 


交互 动 效 的 制作 可 以 让 交互 设计 师 更 清晰 地 阐述 自己 的 设计 理念 ， 同 时 帮助 程序 管理 人 员 和 研发 人 员 在 
评审 中 解决 视觉 上 的 问题 。 交 互动 效 具 有 续 密 清晰 的 逻辑 思维 、 配 合 研发 人 员 更 好 地 实现 效果 和 帮助 程序 管 


理 人 员 更 好 地 完善 产品 的 优点 。 


2 交互 动 效 的 优势 


随 着 技术 的 不 断 发 展 ， 动 态 交互 效果 越 来 越 多 地 被 应 用 于 实际 的 项 目 中 。 手 机 、 网 页 等 媒介 都 
在 大 范围 应 用 ， 为 什么 动态 交互 效果 越 来 越 吃香 ?” 它 有 哪些 优势 呢 ? 


交互 动 效 设计 可 以 更 加 全 面 、 形 象 地 展示 产品 的 功能 、 界 面 、 交 互 操作 等 细节 ， 让 用 户 更 直观 
地 了 解 一 款 产品 的 核心 特征 \ 用 途 、 使 用 方法 等 细节 。 如 图 2-13 所 示 为 通过 交互 动 效 来 展示 产品 功能 。 


ES Mose Fruit Sto re 
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目前 许多 企业 或 品牌 Logo 已 经 不 再 局 限于 静态 的 展示 效果 ， 而 是 采用 动态 效果 进行 表现 ， 从 而 
使 品牌 形象 表现 得 更 加 生动 。 例 如 我 们 在 电影 开场 前 所 看 到 的 各 制 片 公司 的 品牌 Logo 都 是 采用 动态 
方式 展现 的 ， 目 前 在 网 络 中 也 越 来 越 多 采用 动态 方式 展示 品牌 Logo 的 案例 ,例如 “ 爱 奇 艺 ”“ 优 酷 ” 
等 视频 网 站 。 如 图 2-14 所 示 为 一 个 动态 Logo 效果 。 


© © a 


图 2-14 


》3. 有 利于 展示 交互 原型 2 


很 多 时 候 设 计 不 能 光 靠 嘴 去 解释 你 的 想法 ， 静 态 的 设计 图 设计 出 来 后 也 不 见得 能 让 观 者 一 目 
了 然 。 因 为 很 多 时 候 交互 形式 和 一 些 交 互动 效 真 的 很 难 用 语言 描述 来 说 清楚 ， 所 以 才 会 有 高 保 真 
Demo， 这 样 就 节约 了 很 多 沟通 成 本 。 如 图 2-15 所 示 为 动态 的 交互 原型 设计 。 
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图 2-15 


人 C=CSSCLSY》 ss um 
4. 增加 产品 的 亲和力 和 趣味 性 


在 产品 中 合理 地 添加 动态 效果 ， 能 够 立刻 拉 近 与 用 户 之 间 的 距离 ， 如 果 能 够 在 动态 效果 中 再 添 
加 一 些 趣味 性 在 里 面 ， 那 么 就 会 让 用 户 更 加 “爱不释手 ”。 如 图 2-16 所 示 为 动态 效果 趣味 性 的 表现 。 
”aaaean XN gonna 六 ”Ratoagan 多 ”ME 


如 果 你 变 成 薄 室 ， 四 
人 


加 。 如果 你 站 成 薄 生 ， 图 。 如果 你 志 成 东 呈 ， @ 
测 测 指 你 的 景 佳 次 扫 


如 果 你 变 成 戎 宇 ， 
测 测 撞 你 风景 佳 wm 次 


测 测 排 你 风景 佳 ”姿势 
-fa 


图 2-16 


动 效 的 分 类 © 


随 着 技术 的 不 断 发 展 ， 动 效 越 来 越 多 地 被 应 用 于 实际 的 项 目 中 ， 可 以 将 动 效 设计 粗略 地 分 为 两 
大 类 。 


了 1. 功能 性 动 效 


功能 性 动 效 多 适用 于 产品 设计 ， 是 UI 交互 界面 设计 中 最 常见 的 动 效 类 型 ， 当 用 户 与 界面 进行 交 
互 时 所 产生 的 动 效 都 可 以 人 


请 该 芭 让 是 App 二 用 中 最 可 而 的 种 功能 性 特效 ， 其 应 用 
用 卡片 滑动 切换 动 效 。 


2. 展示 型 动 效 


展示 型 动 效 主要 是 指 一 些 用 于 展示 酷 炫 的 动画 效果 或 者 对 产品 功能 进行 演示 的 动 效 设计 ， 这 
类 动 效 相对 来 说 比 功能 性 动 效 要 复杂 ， 但 是 在 实际 的 界面 交互 设计 中 应 用 较 少 。 如 图 2-18 所 示 为 
Logo 动 效 设计 。 


Kea 
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图 2-18 


2.3 三 交互 动 效 在 用 户 体验 中 的 应 用 2 


当 用 户 打开 一 个 界面 ， 注 意 力 首先 会 被 动态 的 元 素 吸引 ， 然 后 才 会 把 注意 力 转向 颜色 对 比 强 的 
部 分 ， 最 后 才 是 形状 。 这 一 过 程 是 人 在 进化 过 程 中 形成 的 本 能 反应 ， 基 本 适用 所 有 用 户 。 同 时 一 个 
非常 重要 且 容 易 被 忽略 的 原则 : 用 户 的 注意 力 是 有 限 的 ， 而 且 越 来 越 少 。 并 且 如 果 界 面 中 的 动态 效 
果 过 多 ， 也 会 使 用 户 感觉 非常 杂乱 。 


在 交互 过 程 中 添加 动 效 需要 考虑 的 因素 
在 设计 交互 动 效 之 前 ， 首 先 需要 考虑 为 什么 要 添加 交互 动 效 ? 可 以 通过 以 下 几 个 方面 来 衡量 是 


否 应 该 在 交互 过 程 中 添加 动 效 设计 。 
1. 动 效 是 否 会 影响 到 产品 的 性 能 。” 
首先 ， 所 添加 的 动 效 设计 是 否 会 影响 到 产品 的 性 能 ?这 个 是 最 重要 的 ， 添 加 任何 交互 动 效 前 都 


要 考虑 是 否 会 影响 产品 的 性 能 ， 如 果 一 个 很 酷 炫 的 动 效 会 拖累 产品 的 性 能 ， 使 体验 变 得 卡 顿 不 流畅 ， 
那么 必须 毫 不 犹 驳 地 砍 掉 或 简化 它 。 


>. 所 添加 的 动 效 是 否 能 够 提高 产品 的 可 用 性 。 ) 


任何 交互 动 效 的 出 现 都 必须 带 有 明确 的 目的 性 ,能够 解决 用 户 在 使 用 过 程 中 的 
单纯 的 炫 技 只 会 分 散 用 户 的 注意 力 ， 弱 化 内 容 ， 从 而 获得 适得其反 的 效果 。 


3. 所 添加 的 动 效 是 否 能 够 使 产品 表现 出 独特 的 气质 


这 里 所 说 的 气质 是 指 动 效 本 身 会 有 助 于 增强 用 户 对 于 产品 的 认 知 和 情绪 带 入 。 一 个 相得益彰 的 
动 效 会 为 产品 锦上添花 ， 深 化 主题 和 功能 ， 注 意 ， 一 定 是 与 主题 相关 的 ， 牵 强 的 搭配 只 会 使 人 觉得 
莫名 其 妙 ， 毫 无 意义 。 


2 如何 表现 交互 动 效 6 


前 面 已 经 介绍 了 在 哪些 地 方 适 合 添加 动态 效果 ， 那 么 应 该 如 何 表现 动态 效果 呢 ? 除了 前 面 所 介 
绍 的 基础 动画 表现 方式 外 ， 主 要 有 以 下 几 种 方式 。 


四 


惑 , 而 不 是 炫 技 。 
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第 2 章 初 识 山 交互 动 效 ， 


1. 基于 真实 形态 的 模拟 


基于 现实 生活 中 对 象 的 真实 形状 所 模拟 出 来 的 动画 效果 能 够 给 人 一 种 自然 流畅 、 符 合 运动 规律 
的 感觉 ， 例如 物体 运动 时 的 级 动 现象 。 如 图 2-19 所 示 为 切换 动 效 。 


一 个 图 片 的 切换 动 效 ， 其 动 效 的 表现 效果 就 完全 模拟 了 真实 世界 中 书本 翻 页 的 表现 形态 ， 给 人 一 种 自然 流畅 的 
a 1 


2. 人 物 动作 夸张 化 


在 动 效 设计 中 ， 经 党 会 出 现 各 种 各 样 的 人 物 形象 ， 夸张 的 人 物 动 作 会 使 作品 的 形象 更 加 生动 ， 


面 设计 ， 界 面 设计 采用 了 卡通 的 
表现 形式 ， 搭 配 幽 轩 的 顺口 温 主 ; 
题 , 给 人 一 种 轻松 、 议 谐 的 印象 。 
并 且 在 每 个 界面 的 设计 中 根据 主 ; 
题 的 不 同 ， 设 计 了 不 同 的 夸张 人 ; 
物 动作 , 给 用 户 留 下 深刻 的 印象 。 


3. 为 元 素 赋予 弹性 
有 弹性 的 物体 会 让 用 户 觉得 具有 生命 感 和 真实 性 ， 弹 性 的 程度 取决 于 对 元 素 软 硬度 的 设 定 ， 如 
图 2-21 所 示 。 
1 在 该 天 气 App 界面 中 ， 不 仅 在 背 ; 
| 景 部 分 通过 天 气动 画 的 形式 来 表 ! 
| 现 天 气 状况 ， 并 且 下 方 未 来 几 天 】 
| 的 天 气 状况 也 采用 了 位 移入 场 的 } 


| 动画 形式 ， 按照 元 素 缓 动 的 原理 ， } 


四 ; 为 内 容 赋予 弹性 处 理 ， 使 动画 效 ; 
“大 < ; 果 的 表现 更 加 真实 。 
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外 通过 快速 切换 的 画面 来 形成 一 种 奇妙 的 后 现代 感觉 ， 如 图 2-22 所 示 。 


设计 ， 界 面 中 红色 的 立体 几何 形状 会 自动 变换 其 形状 ， 快 速 地 变换 为 不 同 的 立体 几何 图 形 ， 
! 最 终 变换 为 一 条 红色 的 玫瑰 花 再 从 玫瑰 花 变 换 为 最 终 的 椭圆 形 ， 如 此 反复 ， 几 何 形状 的 快速 变化 ， 具 有 很 强 的 节 | 


I 项 目 中 还 有 很 多 表现 交互 动 效 的 手段 ， 建 议 大 家 平时 可 以 多 留意 观察 和 体会 ， 因 为 动画 本 身 是 一 种 对 
和 诺 梳 括 的 守 设 


2.4 右 如 何 设计 动 效 ”2 | 


好 的 动 效 设计 应 该 首先 服务 于 用 户 体验 ， 其 次 适当 设计 ， 再 次 就 是 要 让 用 户 感受 到 产品 的 情感 
互动 ， 最 后 也 是 最 基本 的 就 是 要 具有 视觉 上 的 美感 。 那 么 ， 对 于 初学 者 如 何 才能 进行 动 效 设计 呢 ? 


个 好 的 动 效 ， 首 先 就 必须 拥有 一 个 出 色 的 想法 ， 想 法 怎么 来 ? 怎么 构思 ? 可 以 从 
a 个 方面 进行 构思 。 


在 动 效 设计 之 前 ， 需 要 结合 产品 进行 思考 ， 思 路 设计 要 符合 提升 产品 的 用 户 体验 ， 要 经 过 细致 
思考 ， 不 要 盲目 。 


) 2. 了 解 动 效 的 基本 常识 ， 


在 进行 动 效 设计 之 前 ， 首 先 需要 了 解 动 效 的 基本 常识 ， 这 些 常识 包括 运动 基本 常识 ( 如 基本 的 
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运动 规律 、 节 奏 等 ) ， 动 效 开 发 的 基本 常识 ， 什 么 样子 的 动 效 如 何 去 实 现 ， 实 现成 本 大 概 是 多 少 。 
只 有 理解 并 掌握 这 些 基本 常识 ， 才 能 够 确保 动 效 设计 的 顺利 进行 。 


人 们 对 于 美的 认 知 ， 大 部 分 来 自 于 日 常 的 生活 经 历 。 比 如 什么 样 的 运动 是 温柔 的 、 激 烈 的 、 具 
有 震撼 性 的 。 当 我 们 对 于 需要 构思 的 动 效 有 性 质 定位 的 时 候 ， 可 以 从 生活 中 这 些 相同 的 自然 事物 中 
寻找 灵感 ， 取 其 精华 。 


4. 多 看 多 思考 


除了 多 观察 生活 ， 我 们 还 需要 多 看 一 些 优秀 的 动 效 设计 ， 在 观看 的 过 程 中 ， 同 时 还 需要 去 思考 


他 为 什么 要 这 么 设计 ， 是 通过 哪些 技巧 和 方法 完成 这 个 动 效 设计 的 ， 以 及 动 效 的 整体 节奏 等 。 时 刻 
与 自己 对 类 似 事物 的 想法 进行 对 比 ， 找 差距 、 补 不 足 ， 这 就 是 经 验 技巧 积累 的 过 程 。 


大 多 数 的 动 效 设计 都 是 通过 基础 的 变化 组 合 而 成 的 ， 我 们 要 通过 多 看 多 观察 ， 慢 慢 学 会 怎么 去 
拆 解 别人 复杂 的 动 效 设计 ， 从 中 总 结 经 验 。 然 后 ， 通 过 合理 的 编排 设计 出 自己 的 动 效 ， 你 就 是 这 场 
动 效 设计 的 导演 。 


动 效 设计 中 的 基础 变化 主要 包含 4 种 ， 主 要 是 移动 、 旋 转 、 缩 放 和 属性 变化 。 所 有 的 这 些 变化 形式 ， 经 过 合理 
的 编排 配合 合适 的 运动 节奏 ,就 是 一 个 完整 的 动 效 设 计 。 关 于 动 效 设 计 的 基础 变化 ,将 在 本 章 第 2.6 节 中 进行 详细 介绍 。 
如 图 2-23 所 示 为 旋转 动 效 。 


站 可 J 


! 许多 动 效 都 是 由 元 素 的 基础 属性 变化 所 形成 的 ， 例 如 该 动 效 主要 就 是 i 
! 画 效果 ， 通 过 多 种 基础 属性 变化 的 ! 


6. 紧 跟 设计 潮流 


我 们 要 时 刻 保持 对 设计 行业 ， 或 者 说 对 动 效 设计 领域 的 关注 ， 了 解 当下 新 的 设计 趋势 、 设 计 


方式 和 表现 手法 等 ， 不 做 一 个 落伍 者 ， 也 不 要 把 自己 永远 定义 为 一 个 跟随 者 。 如 图 2-24 所 示 为 粒 
子 动 效 。 


图 2-24 


根据 想法 付 诸 行动 


前 面 介 绍 了 如 何 构思 想法 ， 有 了 想法 接 下 来 就 是 如 何 去 实 现 想法 。 实 现 想法 基本 上 就 是 技术 和 
技巧 的 问题 ， 这 就 需要 我 们 不 断 地 进行 学 习 和 积累 。 


1 动手 尝试 ， 熟 能 生 巧 


理解 了 一 些 理论 知识 后 , 一 定 要 亲自 动手 进行 尝试 , 不 断 尝试 才能 够 锻炼 自己 ,提高 技术 水 平 
只 有 尝试 才能 够 真 的 验证 自己 的 设计 。 


) 2. 多 临 幕 ， 多 练习 


学 习 任 何 东 西 , 特别 是 在 设计 行业 中 ,临摹 都 是 一 个 非常 有 效 的 入 门 方法 , 动 效 设计 也 是 如 此 。 
临摹 的 过 程 其 实 就 是 与 优秀 设计 师 交 流 的 过 程 ， 从 中 能 够 仔细 了 解 和 学 习 他 的 设计 思路 和 表现 手法 ， 
也 能 够 在 临摹 的 过 程 中 对 原 有 设计 手法 结合 自身 经 验 进行 优化 升级 ， 是 很 好 的 提升 技巧 的 方法 。 


细节 决定 成 败 ， 动 效 设 计 和 做 单纯 的 视觉 设计 一 样 ， 一 定 要 注重 动 效 细节 的 表现 。 全 面 思考 ， 
认真 实践 。 


通过 动 效 的 设计 使 你 的 作品 有 活力 不 死板 ， 才 能 够 赋予 产品 新 的 活力 。 


在 动 效 的 设计 过 程 中 ， 可 以 不 断 地 丰富 原 有 的 设计 想法 ， 当 你 不 太 明确 如 何 丰富 自己 的 设计 ， 
或 者 不 太 清楚 使 用 何 种 技巧 达到 自己 设想 的 感觉 时 ， 可 以 先 尝试 看 哪些 地 方 可 以 动态 化 ， 可 以 这 样 
运动 是 否 也 可 以 那样 运动 ， 制 作出 可 能 性 和 突破 性 。 然 后 ， 在 这 些 可 能 性 和 突破 性 后 进行 减法 ， 去 
除 多 余 ， 保 留 精华 
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随 着 UI 设计 的 不 断 发 展 ，UI 动 效 越 来 越 多 地 被 应 用 于 实际 的 生活 中 。 优 秀 的 动态 交互 效果 设计 


Em 


在 提升 产品 体验 、 用 户 黏 性 方面 的 积极 作用 有 目 共 睹 ， 已 经 成 为 当下 Web 和 App 产品 交互 设计 和 界 
面 设计 必 不 可 少 的 元 素 。 那 么 ， 我 们 可 以 使 用 哪些 工具 来 制作 UI 交互 动 效 呢 ? 


1. Adobe After Effects 


After Effects 


全 
但 


称 AE, 是 


目前 热门 的 


交互 动 效 设计 软件 。After Effects 的 功能 非常 强大 ， 基 本 上 


想 


心 


四 


的 功能 都 能 实现 ，UI 交互 动 效 其 
大 片 都 是 通过 它 来 进行 后 期 合成 制作 的 


实 只 使 


到 了 该 软件 中 很 小 一 部 分 功能 而 已 ， 要 知道 很 多 的 美 


凤 2-25 所 示 的 动 效 就 是 使 


Hyy 


， 配 合 Photoshop 和 lllustrator 等 软件 ， 更 是 得 心 应 手 。 如 


本 书 所 讲解 的 UI 交互 动 效 设计 也 是 基于 该 软件 ， 包 括 后 面 的 章节 中 也 将 通过 使 用 该 软件 来 制作 各 种 不 同 的 UI | 


| 交互 动 效 


2. Adobe Photoshop 


可 能 很 多 人 都 认为 Pho 


当然 ，Photoshop 
加 入 了 视频 时 间 各 


但 是 Photoshop 9 


(1 ) 时 间 轴 


oshop 只 是 


只 能 通过 其 


时 间 轴 来 所 


来 作 图 和 处 理 医 
作 一 些 比较 简单 


像 的 ,并 不 知道 Photoshop 也 可 以 制作 动画 。 
的 GIF 动画 效果 ， 在 Photoshop CC 版 本 


b 


完成 简单 的 交互 效果 ， 如 移动 、 变 换 、 图 层 样 式 等 。 


功能 ， 这 村 


可 以 快速 


总 时 长 只 有 5s， 在 新 


( 2 ) 不 支持 


转 


pb 的 时 间 轴 动画 也 有 一 些 次 端 。 


绕 点 旋转 ， 只 支持 


版 本 中 不 能 延长 时 间 。 
P 心 对 称 旋转 ， 这 会 造成 一 些 不 便 。 


( 3 ) 效果 样 


式 较 少 ， 


些 复杂 的 效果 难以 实现 。 


2) 
3) 
4) 


( 


动画 效果 4 


如 区 


2-26 所 示 就 是 使 


硬 ， 没 有 缓 动 效果 ， 整 体 动画 效果 不 太 好 。 
Photoshop 软件 所 制作 的 简单 的 GIF 动画 效果 。 


图 2-26 


3. Adobe Flash 


Flash 在 以 前 互联 网 动画 中 应 用 非常 普遍 ， 可 以 说 是 过 去 交互 动画 的 王者 ， 但 是 其 缺点 也 非常 明 
显 ，Flash 动画 的 播放 需要 有 浏览 器 插件 的 支持 ， 并 且 随 着 移动 互联 网 的 发 展 ，Flash 动画 在 移动 端 
应 用 的 次 端 愈 发 明显 ， 而 随 着 HTML5 和 CSS3 等 新 技术 的 崛起 ，Flash 目前 已 经 基本 被 淘汰 。 

Adobe 公司 为 了 适应 HTML5 和 CSS3 设计 的 发 展 趋势 ， 在 Flash 的 基础 上 添加 了 HTML5 动画 
的 新 功能 和 新 属性 ， 从 而 开发 了 新 的 取代 Flash 的 软件 Adobe Animate CC。 如 图 2-27 所 示 为 2 个 
软件 的 启动 界面 。 


D4. CINEMA 4D 


CINEMA 4D 是 近 几 年 比较 火 的 一 款 三 维 动画 制作 软件 ， 其 特点 是 拥有 极 高 的 运算 速度 和 强大 的 
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泻 染 插件 。 与 众所周知 的 其 他 3D 软件 一 样 ( 如 Maya、3ds Max 等 ) ，CINEMA 4D 同样 具备 高 端 
3D 动画 软件 的 所 有 功能 。 所 不 同 的 是 ， 在 研发 过 程 中 CINEMA 4D 的 工程 师 更 加 注重 工作 流程 的 流 
畅 性 、 舒 适 性 、 合 理性 、 易 用 性 和 高 效 性 。 因 此 ， 使 用 CINEMA 4D 会 让 设计 师 在 创作 设计 时 感到 非 
常 轻松 愉快 ,赏心悦目 ， 在 使 用 过 程 中 更 加 得 心 应 手 ， 有 更 多 的 精力 置 于 创作 之 中 ， 即 使 是 新 用 户 ， 
也 会 感觉 到 CINEMA 4D 上 手 非 常 容易 。 
CINEMA 4D 同样 是 一 款 非 常 出 色 的 交互 动 效 制 作 软件 ， 使 用 CINEMA 4D 能 够 制作 出 许多 具有 
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三 维 立 体感 的 酷 炫 动 效 ， 如 图 2-28 所 示 。 


Pixate 是 一 款 图 层 类 交互 原型 设计 软件 ， 
其 优点 是 可 交互 、 共 享 性 强 ， 与 Sketch 软件 
的 结合 相对 比较 高 ， 同 时 对 Google Material 
Design 的 支持 比较 好 , 有 许多 MD 相关 预 设 。 
Pixate 软件 的 缺点 是 没有 时 间 轴 ， 层 级 管理 不 
是 非常 明确 ， 图 层 一 多 就 会 显得 非常 繁杂 。 
如 图 2-29 所 示 为 该 软件 启动 界面 。 


以 上 所 介绍 的 这 几 款 动 效 制作 软件 都 能 够 支持 Windows 操作 系统 ， 除 了 以 上 介绍 的 几 款 软件 之 外 ， 还 有 其 他 一 
些小 软件 同样 能 够 制作 交互 动 效 ， 例 如 Origami、Hype 3、Flinto 和 Principle 等 ， 这 些 软件 都 有 其 独特 的 优点 ， 但 大 


多 数 只 支持 Mac 操作 系统 ，/ 


趣 的 用 户 可 以 查找 相关 资料 进行 深入 了 解 
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前 面 介绍 过 ， 我 们 在 网 站 和 App 应 用 界 


中 所 看 到 的 动 效 设计 都 是 由 一 些 基础 的 变化 


组 合 而 成 的 ， 这 些 基础 变化 如 图 2-30 所 示 。 
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我 们 平时 在 App 应 用 界面 中 看 到 的 动 效 


其 实 都 是 由 一 些 最 基础 的 动 效 组 合 而 成 的 ， 这 


些 基础 动 效 包 括 移动 、 旋 转 和 缩放 。 在 交互 动 a 
效 设计 软件 中 ， 通 常 只 需要 设置 对 象 的 起 点 和 
终点 ， 并 在 软件 中 设置 想 要 实现 的 动 效 ， 设 计 软 件 便 会 根据 这 些 设置 去 演 染 出 整个 动画 过 程 。 


移动 ， 顾 名 思 义 就 是 将 一 个 对 象 从 位 置 A 移动 到 位 置 B， 如 图 2-31 所 示 。 这 是 最 常见 的 一 种 
动态 效果 ， 像 滑动 、 弹 跳 、 振 动 这 些 动态 效果 都 是 从 移动 扩展 而 来 的 。 


图 2-31 


BEB OO 0 如 图 2-32 所 示 。 通 常 在 页 面 加 载 ， 
或 点 击 某 个 按钮 触发 一 个 较 长 时 间 操作 时 ， 经 常 使 用 到 的 Loading 效果 或 一 些 菜单 图 标的 变换 都 会 使 
用 旋转 动态 效果 。 


图 2-32 


3 绽放。 


SE ne 如 图 2-33 所 示 。 例 如 点 击 一 个 App 图 标 ， 打 
开 该 App 全 屏 界 面 时 ， 就 是 以 缩放 的 方式 来 展开 的 ， 还 有 通过 点 击 一 张 缩 略图 查看 具体 内 容 时 ， 通 
常 也 会 以 缩放 的 方式 从 缩 略 图 过 渡 到 满 屏 的 大 图 。 


图 2-33 


在 上 一 节 中 已 经 介绍 了 3 种 最 基础 的 动 效 : 移动、 旋转 和 缩放 ， 但 元 素 的 动 效 除了 使 用 这 3 种 
基础 的 动 效 进行 组 合 之 后 ， 还 会 加 入 元 素 属 性 的 变化 。 属 性 变化 其 实 就 是 指 元 素 的 透明 度 、 形 状 、 
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颜色 等 属性 在 运动 过 程 中 的 变化 。 
属性 变化 也 可 以 理解 为 是 一 种 基础 动 效 ， 例 如 可 以 通过 改变 元 素 的 透明 度 来 实现 元 素 淡 入 / 淡 
出 的 动画 效果 等 。 同 时 还 可 以 通过 改变 元 素 的 大 小 、 颜 色 、 位 置 等 几乎 所 有 属性 来 体现 动画 效果 ， 


| | 二 是 App 应 用 界面 中 功能 开关 按钮 的 交互 动 效 设计 ， 当 打开 某 个 功能 时 ， 该 功能 按钮 的 小 加 位 置 移动 到 另 一 侧 ， 并 | 
| 且 该 功能 选项 的 背景 色 会 从 开关 按钮 的 位 置 逐渐 放大 覆盖 整个 功能 选项 。 当 关闭 某 个 功能 时 ， 该 功能 按钮 的 小 圆 位 
| 置 移动 到 另 一 侧 ， 并 且 该 功能 选项 的 背景 色 会 渐渐 收缩 至 开关 按钮 下 方 隐藏 


自然 界 中 大 部 分 物体 的 运动 都 不 是 线性 的 ， 而 是 按照 物理 规律 呈 曲 线性 运动 的 。 通 俗 点 来 说 ， 
就 是 物体 运动 的 响应 变化 与 执行 运动 的 物体 本 身 质量 有 关 。 例 如 ， 当 我 们 打开 抽 居 时 ， 首 先 会 让 它 
加 速 ， 然 后 慢 下 来 。 当 某 个 东西 往 下 掉 时 ， 首 先是 越 掉 越 快 ， 撞 到 地 上 后 回 弹 ， 最 终 才 又 碰 触 地 板 。 

优秀 的 动 效 设计 应 该 反映 真实 的 物理 现象 ， 如 果 动 效 想 要 表现 的 对 象 是 一 个 沉甸甸 的 物体 ， 4 
么 它 的 起 始 动画 响应 的 变化 会 比较 慢 。 反 之 ， 对 象 如 果 是 轻巧 的 ， 那 么 其 起 始 动画 响应 的 变化 会 
较 快 。 如 图 2-35 所 示 为 元 素 缓 动 效果 示意 图 。 


“ti 仿 ssm 个 钱 性 运动 本 
ta 从 ta 三 坦 带 开始 @ 

{ws 从 蛋 吉 结 ® 但 过 结束 ®@ 
*inim 仿 *hnesmg 优 2 和 n 过 后 天 ® 
tw 从 理性 运动 @ wt @ 


图 2-35 
所 以 在 交互 动 效 设计 中 还 需要 考虑 到 元 素 的 运动 节奏 ， 从 而 使 所 制作 的 交互 动 效 表现 得 更 加 真 
实 、 自 然 ， 如 图 2-36 所 示 。 
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人 国史 人间 各 轩 


在 订 交 App 民 面 中 ， 用 户 可 以 上 下 滑动 界面 ， 当 用 户 滑动 界面 时 ,界面 的 运 这 度 总 笋 慢 示 开始 ， 中 这 度 加 以， 
; 再 缓慢 地 结束 ， 这 种 运动 方式 就 充分 地 考虑 了 对 象 的 运动 规律 ， 并 且 在 运动 过 程 中 加 入 了 运动 模糊 ， 使 界面 的 动 效 ; 
| 表现 更 加 真实 富有 动感 。 


”基础 动 效 组 合 应 用 9 

在 大 多 数 场景 中 ， 一 般 需 要 同时 使 用 2 种 以 上 的 基础 动 效 ， 将 它们 有 效 地 组 合 在 一 起 ， 以 达到 
更 好 的 动态 效果 。 另 外 ， 需 要 让 交互 动 效 遵循 普遍 的 物理 规律 ， 这 样 才 能 使 所 制作 的 动 效 更 容易 被 
用 户 接受 。 如 图 2-37 所 示 为 基础 动态 的 综合 运用 。 
理想 的 动 效 时 长 应 该 在 0.5~1s 之 间 ， 在 设计 淡 入 淡出 、 滑 动 、 缩 放 等 动 效 时 都 应 将 时 长 控制 在 
这 个 范围 内 。 如 果 动 效 时 长 设置 得 太 短 ， 会 让 用 户 看 不 清 效果 ， 甚 至 更 糟 的 是 给 用 户 造成 压迫 感 。 
反 过 来 如 果 动 效 持续 时 间 过 长 ， 又 会 使 人 感觉 无 聊 ， 特 别 是 当 用 户 在 使 用 App 的 过 程 中 ， 反 复 看 到 
效 的 时 候 。 


”不 透明 度 变化 等 ， 通 ， 
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ja Effects 不 再 仅仅 局 限于 影视 和 后 期 效果 的 制作 ， 由 于 其 自身 具 尖 的 特效 能 够 4 合用 户 带 来 想 要 的 
效果 ， 并 且 输 出 文件 具有 高 保 真 的 特性 ， 在 目前 流行 的 交互 动 效 设计 中 被 广泛 使 用 。 想 要 使 用 After 
Effects 软件 制作 交互 动 效 ， 首 先 必须 掌握 After Effects 软件 的 操作 ， 在 本 章 中 将 向 读者 介绍 有 关 
After Effects 的 基础 操作 。 


| 3.1 \m 认识 After Effects 2 恒 汪 汪汪 


After Effects 可 以 帮助 用 户 高 效 、 精 确 地 创建 精彩 的 动态 图 形 和 视觉 效果 。After Effects 在 各 
个 方面 都 具有 优秀 的 性 能 ， 不 仅 能 够 广泛 支持 各 种 动画 文件 格式 ， 还 具有 优秀 的 跨 平台 能 力 。After 
Effects 作为 一 款 优秀 的 视频 特效 处 理 软件 ， 经 过 不 断 地 发 展 , 在 众多 行业 中 已 经 得 到 了 广泛 的 使 用 。 


——— py 


After Effects 简称 AE， 是 Adobe 公司 开发 的 
一 款 视频 剪辑 及 后 期 处 理 软 件 ， 目 前 的 最 新 版 本 是 
After Effects CC 2018。After Effects 是 制作 动态 影 
像 不 可 或 缺 的 辅助 工具 ， 是 视频 后 期 合成 处 理 的 专 
业 非 线性 编辑 软件 。After Effects 应 用 范围 广泛 ， 
邓 盖 视频 短片 、 电 影 、 广 告 、 多 媒体 和 网 页 等 。 如 
3-1 所 示 为 After Effects CC 2018 的 启动 界面 。 

After Effects 支持 无 限 多 个 图 层 ， 它 能 够 直接 
导入 lllustrator 和 Photoshop 文件 。After Effects 也 
有 多 种 插件 ， 其 中 包括 Meta Tool Final Effect， 它 
能 够 提供 虚拟 移动 图 像 以 及 多 种 类 型 的 粒子 系统 ， 
使 用 它 还 能 够 创造 出 独特 的 迷 幻 效果 。 

引入 Photoshop 中 的 图 层 ， 使 After Effects 可 以 对 多 层 的 合成 图 像 进行 控制 ， 制 作出 天 衣 无 颖 
的 合成 效果 。 关 键 帧 、 路 径 的 引入 ， 对 控制 高 级 的 二 维 动画 来 说 是 一 个 很 有 效 的 解决 途径 。 高 效 的 
视频 处 理 系统 ， 也 确保 了 高 质量 视频 的 输出 。 


图 3-1 


随 着 社会 的 进步 ， 科 技 的 发 展 ， 电 视 、 计 算 机 、 网 络 、 移 动 多 媒体 等 媒体 设备 越 来 越 广泛 地 在 
人 们 的 生活 中 普及 。 每 天 人 们 都 通过 不 同 的 媒体 观看 和 了 解 新 闻 时 事 、 生 活 资讯 、 娱 乐 节目 ， 这 已 
经 成 为 生活 中 不 可 缺少 的 一 部 分 。 正 因为 有 了 这 些 载体 ， 影 视 后 期 处 理 技术 的 发 展 也 越 来 越 快 ， 影 
视 后 期 处 理 软件 的 应 用 领域 也 越 来 越 广泛 。 
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1. 电影 特效 


自从 20 世纪 60 年 代 以 来 ， 随 着 电影 中 逐渐 运用 了 计算 机 技术 ， 一 个 全 新 的 电影 世界 展现 在 人 
们 面前 ， 这 也 是 一 次 电影 的 革命 。 越 来 越 多 的 计算 机 制作 的 图 像 被 运用 到 电影 作品 中 ， 其 视觉 效果 
的 魅力 有 时 已 经 大 大 超过 了 电影 故事 的 本 身 。 电 影 的 另 一 个 特性 便 是 作为 一 种 视觉 传媒 而 存在 的 。 
在 最 初 由 部 分 使 用 计算 机 特效 的 电影 作品 向 全 部 由 计算 机 制作 的 电影 作品 转变 的 过 程 中 ， 人 们 
已 经 看 到 了 其 在 视觉 冲击 力 上 的 不 同 与 震撼 。 如 今 ， 已 经 很 难看 到 没有 添加 任何 计算 机 特效 元 素 的 
电影 作品 。 如 图 3-2 所 示 为 After Effects 在 电影 特效 方面 的 应 用 。 


影视 后 期 特效 在 影视 动画 中 的 应 用 是 有 目 共 睹 的 ,没有 后 期 特效 的 支持 ,就 没有 影视 动画 的 存在 。 
在 如 今 靠 视听 特效 来 吸引 观众 眼球 的 动画 片 中 ， 无 处 不 存在 影视 后 期 特效 的 身影 。 可 以 说 ， 每 部 影 
视 动画 都 是 一 次 后 期 特效 视听 盛 宣 。 如 图 3-3 所 示 为 After Effects 在 影视 动画 方面 的 应 用 。 


在 信息 化 的 时 代 中 ， 影 视 广告 是 传播 产品 信息 的 首选 ， 同 时 也 是 企业 树立 形象 的 重要 手段 。 运 


用 数 十 秒 的 时 间 将 企业 、 产 品 、 创 意 、 艺 术 有 机 地 结合 在 一 起 ， 可 以 达到 图 、 文 、 声 并 茂 的 特点 ， 
传播 范围 广 ， 也 易 被 大 众 接受 ， 这 是 平面 媒体 所 无 法 取代 的 。 涵 盖 电 视 栏目 包装 、 频 道 包 装 和 企业 
形象 包装 等 功能 的 后 期 特效 已 经 越 来 越 多 地 为 市 场所 接受 。 如 图 3-4 所 示 为 After Effects 在 电视 栏 
目 及 频道 片头 方面 的 应 用 。 


城市 形象 就 是 一 座 城市 的 无 形 资产 ， 是 一 个 城市 综合 竞争 力 不 可 或 缺 的 要 素 。 影 视 后 期 特效 合 
成 在 城市 形象 宣传 片 中 的 应 用 在 树立 良好 的 城市 形象 、 有 力 地 提升 城市 品位 、 激 发 城市 可 持续 发 展 
的 能 力 等 方面 发 挥 了 重要 作用 。 如 图 3-5 所 示 为 After Effects 在 城市 形象 宣传 片 方面 的 应 


o 


图 3-5 


产品 宣传 广告 主要 是 针对 产品 制作 的 动态 影视 特效 ， 一 般 用 在 公众 电视 媒体 、 电 视 传媒 、 网 络 
媒体 等 方面 。 产 品 宣传 广告 如 同一 张 产品 名 片 ， 但 其 图 、 文 、 声 并 茂 ， 使 人 一 目 了 然 ， 无 须 向 客户 
展示 大 段 的 文字 说 明 ， 也 避免 了 反复 枯燥 无 味 的 介绍 。 如 图 3-6 所 示 为 After Effects 在 产品 宣传 广 
告 方面 的 应 用 。 


6. 企业 宣传 片 ” 


相对 于 静止 的 画面 来 说 ， 人 们 当然 喜欢 动态 的 影像 作品 ， 因 而 现在 越 来 越 多 的 企业 希望 自己 的 
企业 或 者 产品 宣传 动 起 来 。 用 数码 摄像 机 拍摄 ， 然 后 使 用 后 期 软件 合成 ， 将 动态 视频 影像 通过 各 种 
渠道 传播 出 去 ， 效 果 好 ， 成 本 低 。 

将 实 拍 视频 、 解 说 、 字 幕 、 动 画 等 技术 结合 起 来 ， 具 有 强大 的 表现 力 和 感染 力 。 从 前 期 策划 、 
脚本 创作 、 拍 摄 、 剪 辑 、 配 音 、 配 乐 ， 到 后 期 光盘 压制 等 全 方位 的 影像 动画 制作 服务 已 经 是 大 多 数 
影视 广告 公司 的 制胜 法 宝 。 此 类 专题 片 制作 有 企业 形象 介绍 、 公 司 品牌 推广 、 产 品 品牌 宣传 、 纪 录 
片 等 。 如 图 3-7 所 示 为 After Effects 在 企业 宣传 方面 的 应 用 。 


民风 信息 技术 于 在 


图 3-7 


7. 交互 动 效 设计 。”》 

随 着 交互 设计 的 发 展 ， 交 互动 效 的 制作 要 求 变 得 更 加 高 规格 ， 动 画 的 效果 也 不 再 只 是 简单 的 图 
片 切 换 。 交 互 设计 师 为 了 满足 广大 用 户 群体 的 需求 ， 逐 渐 地 由 原本 使 用 Flash 软件 制作 交互 动 效 转向 
使 用 After Effects 制作 交互 动 效 ，After Effects 制作 出 的 交互 动 效 更 加 完美 ， 更 能 够 表现 出 设计 师 的 
设计 理念 ， 与 此 同时 ， 还 可 以 实现 一 些 Flash 原本 无 法 实现 的 效果 ， 这 样 一 来 设计 师 与 开发 人 员 的 
沟通 合作 变 得 更 加 便捷 ， 从 整体 上 来 看 ， 更 能 够 充分 地 满足 广大 用 户 群体 的 需求 。 如 图 3-8 所 示 为 
After Effects 在 交互 动 效 设计 方面 的 应 用 。 


图 3-8 


际 , 


和 3 总 After Effects 软件 基础 操作 


i 3.2 |m After Effects 工作 界面 2 0 


在 使 用 After E 
件 的 使 用 方法 。Afte 


After Effects 工作 界面 。 


EE 


ects 进行 交互 动画 设计 之 前 ， 不 仅 要 了 解 交 互 设计 的 理念 ， 还 要 掌握 其 制作 软 
r Effects CC 就 是 现代 交互 动画 设计 的 主流 软件 之 一 ， 本 节 将 带领 读者 全 面 认识 


> 


After Effects 的 工作 界面 越 来 越 人 性 化 ， 将 界面 中 的 各 个 窗口 和 面板 集合 在 一 起 ， 不 是 单独 的 


浮动 状态 ， 这 样 在 


Effects CC 工作 界 


菜单 栏 


y 
项 目 


' 顺 目 古板 


合成 窗口 


“时 间 轴 ” 
面板 


澡 作 过 程 中 免 去 了 拖 来 拖 去 的 麻烦 。 启 动 After Effects CC， 可 以 看 到 全 新 的 After 
， 如 图 3-9 所 示 。 


EEMET TE 


工具 栏 


回 菜单 栏 : 在 After Effects 


个 子 菜单 命令 。 
回 工具 栏 : 包含 After Effects 中 的 各 


名 “项 目 ”面板 


和 编辑 素材 等 相关 操作 。 


图 3-9 


 ， 根 据 功能 和 使 用 目的 将 菜单 命令 分 为 9 类 ， 每 个 菜单 项 中 包含 多 


种 常用 工具 ， 所 有 工具 均 是 针对 “合成 ”窗口 进行 操作 的 。 


: 用 来 管理 项 目 中 的 所 有 素材 和 合成 ， 在 该 面板 中 可 以 很 方便 地 进行 导入 、 删 除 


名 “合成 ”窗口 : 这 是 动画 效果 的 预览 区 ， 能 够 直观 地 观察 要 处 理 的 素材 文件 的 显示 效果 ， 如 果 


要 在 该 窗口 中 显示 画面 ， 首 先 需要 将 素材 添加 到 时 间 轴 中 ， 并 将 时 间 滑 块 移动 到 当前 素材 的 有 


效 帧 内 。 


名 “时间 轴 ”面板 : 该 面板 是 After Effects 工作 界面 中 非常 重要 的 组 成 部 分 ， 它 是 进行 素材 组 织 的 


主要 操作 区 域 ， 主 要 用 于 管理 层 的 顺序 和 设置 动画 关键 帧 。 


加 ”其 他 浮动 面板 : 显示 了 After Effects CC 中 常用 的 面板 ， 用 于 配合 动画 效果 的 处 理 制 作 ， 可 以 通 


过 在 窗口 菜单 中 执行 相应 的 命令 ， 在 工作 界面 中 显示 或 隐藏 相应 的 面板 。 
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After Effects 9d 


pb 有 多 种 工作 


其 中 包括 标准 、 所 有 面板 、 效 果 、 浮 动 面板 、 简 约 、 动 画 、 文 


本 、 绘 画 和 运动 跟踪 等 工作 界 


的 界面 适合 不 同 的 工作 需求 ， 使 用 起 来 更 加 方便 快捷 。 


可 
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如 果 需 要 切换 After Effects 的 工作 界面 ， 可 以 执行 “窗口 ”>“ 工 作 区 ”命令 ， 在 该 命令 的 下 级 
菜单 中 选择 相应 的 命令 ， 即 可 切换 到 对 应 的 工作 区 ， 如 图 3-10 所 示 。 或 者 在 工具 栏 上 的 “工作 区 ” 
下 拉 列 表 中 选择 相应 的 选项 ， 同 样 可 以 切换 到 对 应 的 工作 区 ， 如 图 3-11 所 示 。 


Irzs N " SHE 
人 本 建 如 人 配给“ 际 兴 ”工作 区 J shiftr12 
有关 Exchange 的 六 展 配 - ME 

效果 
六 要 | 
Lumetri Scopes 9 
V 人 cahz 
zm + 
动 起 草图 库 
二 + 可 形 立 本 
未 3 洛 器 关 本 
VV 扩 Celt ES 
Y 赋 me 
vIn cutl |Y 对 从 Skiprmo 
TH 举人 ”重生 力克 局 
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图 3-10 图 3-11 


内 行 “ 窗 口 ”> “工具” 命令 ， 或 者 按 快捷 键 Ctt+1， 可 以 在 工作 界面 中 显示 或 隐藏 工具 栏 。 
具 栏 中 包含 常用 的 编辑 工具 , 使 用 这 些 工具 可 以 在 "合成" 窗口 中 对 素材 进行 编辑 操作 , 如 移动 、 缩 放 、 
旋转 、 绘 制图 形 和 输入 文字 等 ，After Effect 中 的 工具 栏 如 图 3-12 所 示 。 


图 3-12 


名 “选择 工具 ” 国 : 使 用 该 工具 ， 可 以 在 “合成 ”窗口 中 选择 和 移动 对 象 。 

多 “ 手 形 工具 ”加 : 当 素材 或 对 象 被 放大 超过 “合成 ”窗口 的 显示 范围 时 ， 可 以 使 用 该 工具 在 “ 合 
成 ”窗口 中 拖 动 ， 以 查看 超出 部 分 。 

回 “缩放 工具 ” 国 : 使 用 该 工具 ， 在 “合成 ”窗口 中 单 击 可 以 放大 显示 比例 ， 按 住 At 键 不 放 ， 在 
© 
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“合成 ”窗口 中 单 击 可 以 缩小 显示 比例 。 放 大 的 快捷 键 为 Ctr++， 缩 小 的 快捷 键 为 Ctl+-。 
“旋转 工具 ” 国 : 使 用 该 工具 ， 可 以 在 “合成 ”窗口 中 对 素材 进行 旋转 操作 。 
“统一 摄像 机 工具 ” 国 : 在 建立 摄像 机 后 ， 该 按钮 被 激活 ， 可 以 使 用 该 工具 操作 摄像 机 。 在 该 
工具 按钮 上 按 下 鼠标 左 键 不 放 ， 显 示 出 其 他 3 个 工具 ， 分 别 是 “轨道 摄像 机 工具 ”“ 跟 踪 XY 摄 
像 机 工具 ”和 “跟踪 Z 摄像 机 工具 ”， 如 图 3-13 所 示 。 

名 “向 后 平移 ( 锚 点 ) 工具 ”图 : 使 用 该 工具 ， 可 以 调整 对 象 的 轴 心 点 位 置 。 

名 “矩形 工具 ” 辆 : 使 用 该 工具 ， 可 以 创建 矩形 蒙 版 。 在 该 工具 按钮 上 按 下 鼠标 左 键 不 放 ， 显 示 
出 其 他 4 个 工具 ， 分 别 是 “ 圆 角 矩形 工具 ”“ 椭 圆 工具 ”“ 多 边 形 工具 ”和 “ 星 形 工具 ”， 如 
到 3-14 所 示 。 

介 “钢笔 工具 ” 贺 : 使 用 该 工具 ， 可 以 为 素材 添加 不 规则 的 蒙 版 图 形 。 在 该 工具 按钮 上 按 下 鼠标 
左 键 不 放 ， 显 示 出 其 他 4 个 工具 , 分 别 是 “添加 “顶点 工具"”“ 删 除 “ 顶 点” 工具”“ 转 换 ' 顶 
点 ”工具 ”和 “ 蒙 版 羽化 工具 ”， 如 图 3-15 所 示 。 


图 3-13 


图 3-15 
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在 该 了 


在 该 工具 按钮 上 按 


左 键 不 放 , 显示 出 


“ 横 排 


文字 工具 ” 国 : 使 


该 工具 , 可 


以 为 合成 


图 


像 添 加 文字 , 支持 文字 的 特效 制作 ， 功 能 强大 。 


[ 具 按钮 上 按 下 鼠标 左 键 


不 放 ， 显 示 出 另 


“下 


一 个 


“画笔 工具 ” 四: 使 
“仿制 
“橡皮 擦 工具 ” 攻 : 使 
“Roto 笔 刷 工具 ”区 


“操控 点 工具 ” 贺 : 使 用 


该 工具 ， 可 以 对 
图 章 工具 ” 贺 : 使 


合成 


排 文 字 工具 ”， 如 医 
于 像 中 的 素材 进行 绘制 和 编辑 。 


该 工具 ， 


可 以 复制 


0 


素材 中 的 像素 。 
该 工具 ， 可 以 擦 除 多 余 的 像素 


: 使 


该 


工具 ， 可 以 帮助 
:全 标 左 键 不 放 ， 显示 出 另 一 


边缘 工具 ”， 如 医 


a 
ul 


图 3-16 


他 两 


Es 
图 3- 


素材 。 所 制作 的 


目 " 


"项目 ”面板 


动 效 中 需要 


器 


面板 中 ， 在 该 面板 中 


板 如 


图 3-19 所 示 。 


素材 预览 : 此 处 显示 
以 及 尺寸 、 颜 
搜索 栏 : 在“ 项目” 
文件 夹 时 , 可 以 通过 
素材 列表 : 在 该 列表 中 
文件 ， 以 及 各 素材 的 类 


素材 的 透明 通道 、 


息 


次 数 。 


“新 建文 件 夹 ” 按 馈 EE]: 


“新 建 合成 ”按钮 E 到 |: 


于 组 织 、 管 理 项 目 中 所 使 
的 素材 都 要 先导 入 “ 
以 对 素材 进行 预览 。 


使 用 


9 是 当前 所 选中 素材 的 缩 略图 ， 
色 等 基本 信息 。 
板 中 有 较 多 的 素材 、 合 成 或 
索 栏 快速 查找 所 需要 的 素材 。 
显示 当前 项 目 中 的 所 有 素材 
型 、 大 小 等 相关 基本 信息 。 

“解释 素材 ”按钮 EE 强 : 单 击 该 按钮 ， 可 以 设置 选择 
帧 速率 、 上 下 场 、 像 素 以 及 循环 


“项 
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列 


瓮 


“项 目 设置 ”对 话 


选项 进行 修改 。 


“删除 所 选项 目 项 ”按钮 须 汪 让 
“合成 ” 窗 窗口 


框 切换 到 


单 击 该 按钮 ， 可 以 在 “项 目 ”面板 中 新 建 一 个 
“项 目 颜色 深度 ”选项 国王 : 在 该 选项 
弹出 


3-16 所 示 。 


ee 


出 移动 的 前 景 元 素 。 


3-17 所 示 。 


该 工具 ， 可 ee 在 该 工具 按钮 上 按 下 鼠标 
个 工具 , 分 别 是 "操控 到 加 工具 " 和 “操控 扑 粉 工具 ”， 如 区 


3-18 所 示 。 


图 3-18 


图 3-19 


单 击 该 按钮 ， 可 以 在 “项 目 ”面板 中 新 建 一 个 文件 夹 。 


低 


I 


“合成 ”窗口 是 动画 效果 的 预览 区 域 ， 在 进行 动 效 项 目的 设计 制作 


6 该 按钮 ， 可 以 在 “项 目 ” 


合成 。 
pb 显 示 了 当前 项 目的 颜色 深度 设置 ， 单 
“颜色 设置 ”选项 卡 中 ， 可 以 对 当前 项 目的 颜色 深度 


6 该 选项 ， 


面板 中 将 当前 选中 的 素材 删除 。 


寺 ， 它 是 最 重要 的 窗口 ， 在 该 


窗口 中 可 以 预览 到 编辑 时 每 一 帧 的 动画 效果 。 如 果 要 在 “合成 ”窗口 中 显示 画面 ， 首 先 需要 将 素材 

添加 到 时 间 轴 上 ， 并 将 时 间 滑 块 移动 到 当前 素材 的 有 效 帧 内 才 可 以 显示 ， 如 图 3-20 所 示 。 

名 ”当前 显示 的 合成 : 在 一 个 项 目 文件 中 可 以 创建 多 个 合成 , 在 该 下 拉 列 表 中 可 以 选择 需要 在 “合成 ” 
窗口 中 所 显示 的 合成 ， 或 者 对 合成 进行 关闭 、 锁 定 等 操作 。 

名 “始终 预览 此 视图 ”按钮 轩 : 当 该 按钮 呈现 按 下 状态 时 ， 将 会 始终 预览 当前 视图 的 效果 。 

名 “ 主 查看 器 ”按钮 图 : 当 该 按钮 呈现 按 下 状态 时 ， 将 在 “合成 ”窗口 中 预览 项 目 中 的 音频 和 外 
部 视频 效果 。 


KE 


“Adobe 沉浸 式 环境 ”按钮 圈 : 该 选项 


的 预览 效果 ， 如 果 需 要 使 
沉浸 式 环境 ”功能 。 


After Effects CC 移动 网 站 UI 交互 动 效 设计 全 程 揭 秘 


于 设置 是 


否 在 “合成 " 窗 


中 开 


启 Adobe 沉浸 式 环境 
Adobe 沉浸 式 环境 ， 则 需要 佩戴 VR 眼镜 设备 。 默 认为 关闭 “Adobe 


放大 率 葬 于 时 时: 在 该 下 拉 列 表 中 可 以 选择 “合成 ” 窗 
“选择 网 格 和 参考 线 选项 ”按钮 国 : 单 击 该 按钮 ， 在 弹 H 
中 显示 相应 的 标尺 、 网 格 等 。 


窗 
“切换 蒙 版 和 形状 路 径 可 视 


“预览 时 间 ” 选 项 二 本 二 二 到 :显示 当前 预览 时 间 ， 单 击 该 选项 ， 弹 出 


图 3-20 


口 的 视图 


显示 比例 。 


菜单 中 选择 相应 的 选项 ， 可 以 在 “合成 ” 


”按钮 国 单 击 该 按钮 ,可 以 切换 视图 中 蒙 版 和 形状 路 径 的 可 视 性 。 
默认 情况 下 ， 该 按钮 为 按 下 状态 。 


以 设置 当前 时 间 指 针 的 位 置 。 


“创建 快照 ”按钮 国 : 单 击 该 按钮 ， 


“显示 快照 ”按钮 国 : 单 击 该 按钮 ， 
“显示 通道 及 色彩 管理 设置 ”按钮 圈 : 单 击 该 按钮 


或 者 是 进行 色彩 管理 设置 。 


以 在 


以 捕捉 当前 
“合成 ” 窗 


“合成 ”窗口 中 的 视 


中 显示 最 后 创建 


并 创建 快照 。 


的 快照 。 


“ 转 到 时 间 ” 对 话 框 ， 可 


以 在 弹出 菜单 中 选择 需要 查看 的 通道 ， 


“分 辩 率 /向 下 采样 系数 ”选项 车 晤 二 :在 该 下 拉 列 表 中 可 以 选择 “合成 ”窗口 中 所 显示 内 
容 的 分 辨 率 ， 如 图 3-21 所 示 。 
“目标 区 域 ”按钮 回 ; 单 击 该 按钮 ， 可 以 在 视图 中 拖 抽 出 一 个 矩形 框 ， 可 以 将 该 矩形 区 域 作为 


目标 区 域 。 


“切换 透明 网 格 "按钮 贺 当 该 按钮 呈现 按 下 状态 时 ,将 以 呈 明 网 格 的 形式 显示 视图 中 的 透明 背景 。 


“3D 视图 ” 选 IEETST 和 四 在 该 下 拉 列 表 中 可 以 选择 一 种 


3D 视 医 


的 视角 


图 


， 如 


“选择 视图 布局 ”选项 是 要 天时 加 :在 该 下 拉 列 表 中 可 以 选择 一 种 “合成 ” 窗 


如 图 3-23 所 示 。 


“切换 像素 长 宽 比 校正 ”按钮 于 当 该 按钮 呈现 按 
6 该 按钮 ， 可 以 在 弹 


低 


“快速 预览 ”按钮 贺 : 外 
览 的 方式 ， 如 图 3-24 所 示 
“时 间 轴 ” 
“合成 流程 视图 ” 按 馈 国 |: 


标 可 以 调整 “合成 ”窗口 


Ud 


按钮 国 : 单 击 该 按钮 ， 


~o 


自动 选中 当前 工作 界面 中 的 


下 状态 四 
菜单 中 选择 一 种 在 


口 
Yas 


i 


pb 的 曝光 度 效果 ; 


曝光 度 重 置 为 默认 值 。 


单 击 该 按钮 ， 可 以 扣 
“调整 曝光 度 ” 选 项 与 “ 重 置 曝光 度 ” 


HH 
Er 


[ 开 


“流程 医 
在 | 
重 置 曝光 度 ”按钮 ， 


以 对 素材 进行 等 比 人 
“合成 ”窗口 中 进行 快速 预 


， 创 建 项 目的 流程 医 
曝光 度 re 鼠标 左 键 并 
可 以 将 “合成 ” 窗 


的 视 


布 


面板 。 


左右 区 


3-22 所 示 。 
局 的 方式 ， 


的 缩放 操作 。 


呈 昌 


日 ”1 个 视图 
ed 关 ( 晤 和 品质 ) 
2 © 让 适 应 分 辩 率 
草图 

4 个 视图 - 左 硬 2 

4 个 视图 - 右 人 人 给 轿 

4 个 视图 - 顶部 线 本 

4 个 视图 - 斋 部 快速 预览 首选 项 

共享 视图 迁 项 泻 溢 器 选 项 .… 
图 3-23 图 3-24 


“时 间 轴 ”面板 是 After Effects 工作 界面 的 核心 组 成 部 分 ， 动 画 与 视频 编辑 工作 的 大 部 分 操作 
都 是 在 该 面板 中 进行 的 ， 它 是 进行 素材 组 织 和 动画 制作 的 主要 区 域 。 当 添加 不 同 的 素材 后 ， 将 产生 
多 个 图 层 ， 然 后 在 不 同 的 素材 图 层 中 完成 该 图 层 中 素材 动画 的 制作 ， 如 图 3-25 所 示 。 


图 3-25 
“当前 时 间 ” 选 项 车 要 赚 : 早 示 “时 间 轴 ”面板 中 当前 播放 指示 头 所 处 的 时 间 位 置 。 
“合成 微型 流程 图 ” 按 钮 图 : 单 击 该 按钮 可 以 合成 微型 流程 图 。 


“草图 3D” 按 钮 图 : 当 该 按钮 呈现 按 下 状态 时 ， 三 维 图 层 中 的 内 容 将 以 3D 草稿 的 方式 显示 ， 
从 而 加 快 显示 的 时 间 。 
“隐藏 为 其 设置 了 “ 消 隐 ” 开关 的 所 有 图 层 ” 按钮 圈 : 单 击 该 按钮 ， 可 以 同时 隐藏 “时 间 轴 " 
面板 中 所 有 设置 了 “ 消 隐 ” 开 关 的 医 
“为 设置 了 “ 帧 混合 ” 开关 的 所 有 图 层 启用 由; 混合 ” 按 铅 园 : 单 击 该 按钮 ， 可 以 同时 为 “时 间 轴 ” 
面板 中 设置 了 “ 帧 混合 ”开关 的 所 有 图 层 启用 帧 混合 。 
“为 设置 了 “运动 模糊 ”开关 的 所 有 图 层 启 用 运动 模糊 ”按钮 轩 : 单 击 该 按钮 ， 可 以 同时 为 “时 
间 轴 ”面板 中 设置 了 “运动 模糊 ”开关 的 所 有 图 层 启用 运动 模糊 。 
“图 表 编 辑 器 ”按钮 图 : 单 击 该 按钮 ， 可 以 将 “时 间 轴 ”面板 切换 到 图 表 编 辑 器 状态 ， 可 以 通 
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过 图 表 编 辑 器 的 方式 来 设置 时 间 轴 动画 效果 。 


了 解 工作 界面 中 的 其 他 面板 


在 After Effects 工作 界面 中 ， 除 了 常用 的 “项 目 ” 面板、“ 合 成 ”窗口 和 “时 间 轴 ”面板 之 外 ， 
还 包含 其 他 的 一 些 面板 ， 这 些 面板 虽然 并 不 是 经 常 使 用 ， 但 是 也 都 有 其 相应 的 用 途 ， 接 下 来 将 对 这 
些 面板 进行 介绍 。 


“信息 ”面板 主要 用 来 显示 素材 的 相关 信息 ， 在 “信息 ”面板 的 上 部 分 ， 主 要 显示 RGB 值 、 
Alpha 通道 值 、 鼠 标 在 “合成 ”窗口 中 的 坐标 位 置 ; 在 “信息 ”面板 的 下 部 分 ， 根 据 选择 素材 的 不 同 ， 
主要 显示 素材 的 名 称 、 位 置 、 持 续 时 间 、 出 点 和 入 点 等 信息 ， 如 图 3-26 所 示 。 


Ke) 


After Effects CC 移动 网 站 UI 交互 动 效 设计 全 程 揭 秘 
2.“ 音 频 ” 面 板 


在 "音频 " 面板 中 可 以 对 项 目 中 的 音频 素材 进行 控制 , 实现 对 音频 素材 的 编辑 , 执行 “窗口 " >“ 音 
频 ”命令 ， 或 按 快 捷 键 Ctt+4， 可 以 打开 或 者 关闭 “音频 ”面板 ， 如 图 3-27 所 示 。 
量 调节 
左 声 道 
音量 调节 
右 声 道 
颜色 值 音量 调节 
通道 值 
所 选择 对 象 
的 相关 信息 
图 3-26 图 3-27 


“预览 ”面板 主要 是 对 合成 内 容 进行 预览 操作 ， 


并 且 可 以 控制 素材 的 播放 与 停止 还 可 以 进行 预览 
相关 设置 。 执 行 “ 窗 口 ”>“ 预 览 ”命令 ,或 按 快 捷 键 
Ctd+3， 可 以 打开 或 关闭 “预览 ”面板 ， 如 图 3-28 所 示 。 


4.“ 效 果 和 预 设 ”面板 


“效果 和 预 设 " 面板 中 包含 "动画 预 设 "“ 抠 像 *“ 模 
糊 和 锐 化 ” “通道 ”“ 颜 色 校正 ”等 多 种 特效 ， 是 进行 
视频 编辑 处 理 的 重要 部 分 ， 主 要 针对 时 间 轴 上 的 素材 进 
行 特 效 处 理 。 一 般 常 见 的 特效 都 可 以 使 用 “效果 和 预 设 ” es 
面板 中 的 特效 来 完成 的 ， 如 图 3-29 所 示 。 图 3-28 图 3-29 


快速 掌握 After Effects 的 基本 操作 ”Pp 


如 果 需 要 使 用 After Effects 软件 来 制作 交互 动 效 ， 那 么 首先 必须 在 After Effects 中 创建 一 个 新 的 
项 目 ， 这 也 是 After Effects 的 最 基本 操作 之 一 ， 只 有 创建 了 项 目 ， 才 能 够 在 项 目 中 进行 其 他 的 编辑 工 
作 。 在 本 节 中 将 向 读者 介绍 After Effects 的 基本 操作 。 


。 创建 新 项 目 文件 


在 创建 新 项 目 文件 的 时 候 ，After Effects 软件 与 其 他 软件 有 一 个 明显 的 区 别 ， 就 是 在 使 用 After 
Effects 创建 新 项 目 文件 后 ， 并 不 可 以 在 项 目 中 直接 进行 动画 的 编辑 操作 ， 还 需要 在 该 项 目 文件 中 创 
建 合成 ， 才 能 够 进行 动画 的 制作 与 编辑 操作 。 

当 刚 打开 After Effects 软件 时 ， 会 在 软件 工作 界面 之 前 显示 “开始 ”窗口 ， 在 该 窗口 为 用 户 提 
供 了 软件 操作 的 一 些 基本 命令 ， 如 图 3-30 所 示 。 单 击 “新 建 项 目 ” 按 钮 ， 或 者 关闭 该 “开始 ”窗口 ， 
进入 After Effects 工作 界面 中 ， 如 图 3-31 所 示 。 默 认 情况 下 ，After Effects 会 自动 新 建 一 个 空 的 项 
目 文件 。 


ol 


> 


EH 


如 果 用 户 当前 在 After Effects 


第 3 章 After Effects 软件 基础 操作 


软件 中 正在 编辑 一 个 项 目 文件 ， 创建 新 的 项 目 文件 ， 则 可 以 执行 “文件 ”>“ 新 | 


| 建 ”>“ 新 建 项 目 ” 命 令 ， 或 者 按 快捷 键 Ctrl+Alt+N， 即 可 创建 一 个 新 的 项 目 文件 | 
本 去 新 建 合 有 > 

完成 项 目 文件 的 创建 之 后 ， 接 下 来 就 需要 在 该 项 目 文件 中 创建 合成 了 。 在 “合成 ”窗口 中 为 
户 提供 了 两 种 创建 合成 的 方法 ， 如 图 3_32 所 示 。 一 种 是 新 建 一 个 空白 的 合成 ， 另 一 种 是 通过 导入 的 
素材 文件 来 创建 合成 。 

如 果 单 击 “新建 合 成 按钮 ， 则 会 弹出 “合成 设置 ， 对 话 框 ， 在 该 对 话 框 中 可 以 对 合成 的 相关 
选项 进行 设置 ， 如 图 3_33 所 示 。 如 果 单 击 “ 从 素材 新 建 合成 " 按钮 ， 则 会 弹出 “导入 文件 ”对 话 框 ， 
可 以 选择 需要 导入 的 素材 文件 , After Effects 会 根据 用 户 所 选择 导入 的 素材 文件 自动 创建 相应 的 合成 。 


按钮 ， 即 可 包 


| 提示 4 


在 After Effects 中 ， 也 可 以 执行 “合成 ”>“ 新 丰 


图 3-3 


图 3-33 


) 


人 人 


命令 ,或 者 按 快捷 键 Crl+N， 弹 出 “合成 设置 ”对 话 框 | 


a 合成 ” 


在 “合成 设置 ”对 话 框 d 


设置 合成 的 名 称 、 尺 寸 大 小 、 帧 速率 、 持 续 时 间 等 选项 ， 单 击 “ 确 定 ” 


建 一 个 合成 文件 ， 在 “项 目 ” 


板 中 可 以 看 到 刚 创 建 的 合成 ， 如 图 3-34 所 示 。 此 时 ， 


“合成 ”窗口 和 “时 间 轴 ”Ti 


板 都 变 为 可 操作 状态 ， 如 图 3-35 所 示 。 


3 


图 3-35 


合成 " >“ 合 


完成 项 目 中 合成 的 创建 后 , 在 编辑 制作 过 程 中 如 果 需 合成 的 相关 设置 选项 进行 修改 , 可 以 执行 “ 
役 置 ” 命 令 ， 或 按 快捷 键 Ctrl+K， 可 以 在 弹出 的 “合成 设置 ”对 话 框 中 对 相关 选项 进行 修改 


重重 中 存 和 关闭 文件 > 


用 户 在 对 项 目 进行 操作 的 过 程 中 ， 需 要 将 项 目 文件 随时 进行 保存 ， 防 止 程序 出 错 或 发 生 其 他 意 
外 情况 而 带 来 不 必要 的 麻烦 。 
在 After Effects 的 “文件 ”菜单 中 提供 了 多 个 用 于 保存 文件 的 命令 ， 如 图 3-36 所 示 。 
如 果 是 新 创建 的 项 目 文件 , 执行 “文件 ” >“ 保存 " 命令, 或 按 快捷 键 Ctrl+S, 在 弹出 的 “另存 为 ” 
对 话 框 中 进行 设置 ， 如 图 3-37 所 示 ， 单 击 “ 保 存 ” 按 钮 ， 即 可 将 文件 保存 。 如 果 该 项 目 文件 已 经 被 
保存 过 一 次 ， 那 么 执行 “保存 ”命令 时 则 不 会 弹出 “另存 为 ”对 话 框 ， 而 是 直接 将 原来 的 文件 覆盖 。 
ET 和 Sb 全 或 〇 图 EU， 效果 : 
新 建 (N) ， 


打开 项 目 (D)… Ctrl+O 
打开 团队 项 目 … 


在 Bridge 中 浏览 ..。 Ctrl+Alt+Shift+O 


关闭 (QO Ctri+W 
关闭 项 目 


图 3-36 图 3-37 
当 用 户 想 要 关闭 当前 项 目 文件 时 ， 可 以 执行 “文件 ” >“ 关闭 ”命令 或 执行 "文件 ” >“ 关闭 项 目 ” 
命令 。 如 果 当 前 项 目 是 已 经 保存 过 的 文件 ， 风 | 可 以 直 拉 关门 1 放生 和 和 
项 目 文件 ， 如 果 当 前 项 目 是 未 保存 的 或 者 做 了 某 些 修改 而 未 保 
存 的 ， 则 系统 将 会 弹出 提示 窗口 ， 提 示 用 户 是 否 需要 保存 当前 
项 目 或 已 做 修改 的 项 目 ， 如 图 3-38 所 示 。 


可是。 After Effects 中 的 基本 工作 流程 


俗话 说 “万 事 开 头 难 ”， 学 习 After Effects 也 是 一 样 ， 在 学 习 如 何在 After Effects 中 制作 动 效 之 
前 ， 本 节 将 向 读者 介绍 在 After Effects 中 制作 动 效 的 一 般 工 作 流 程 ， 旨 在 建立 一 个 学 习 的 整体 概念 。 


EH 


nt 


在 After Effects 中 进行 交互 动 效 制作 时 ， 需 要 新 建 项 目 和 合成 。 在 启动 After Effects 时 ， 会 自动 创 
建 一 个 空 的 项 目 ， 而 此 时 并 没有 合成 存在 ， 所 以 在 开始 创建 之 前 必须 先 新 建 合成 。 

vy 
完成 了 项 目 和 合成 的 创建 后 ， 接 下 来 可 以 将 相关 的 素材 导入 所 创建 的 项 目 中 ， 以 便于 在 After 
Effects 中 进行 合成 处 理 。 


v 
在 项 目 中 导入 相应 的 素材 后 ， 可 以 将 素材 添加 到 合成 的 “时 间 轴 ”面板 中 ， 这 样 就 可 以 制作 该 素材 
的 动画 效果 了 。 
v 
根据 所 作 交 互动 效 的 需要 ， 如 果 动画 中 有 文字 ， 可 以 在 合成 中 添加 文字 ， 并 制作 文字 的 动画 效果 。 
系 加 文 全 
了 


(5) 在 After Effects 中 完成 交互 动 效 的 制作 后 ， 可 以 将 项 目 保存 ， 并 且 泻 染 输出 所 制作 的 交互 动 效 ， 这 
三 节 心 河 本国 样 就 可 以 看 到 所 制作 的 动 效 了 。 


3.4 车 导 入 与 管理 素材 Ce 


在 After Effects 中 进行 动画 设计 制作 时 ， 通 常 需要 使 用 外 部 的 素材 文件 ， 这 时 就 需要 将 素材 导 
入 “项 目 ” 面 板 中 ， 在 After Effects 中 支持 导入 多 种 不 同 格式 的 素材 文件 。 


导入 素材 的 基本 方法 


1. 导入 单个 素材 2 


在 After Effects 中 ,执行 “文件 ，” >“ 导入 ”> “文件 ”命令 ， 或 按 快捷 键 Cl+|， 在 弹出 的 “ 导 
入 文件 ”对 话 框 中 选择 需要 导入 的 素材 ， 如 图 3-39 所 示 。 单 击 “打开 ”按钮 ， 即 可 将 该 素材 导入 “项 
目 ” 面 板 中 ， 如 图 3-40 所 示 。 


ra 


图 3-39 图 3-40 


视频 和 音频 素材 文件 的 导入 方法 与 不 分 层 静 态 图 片 素材 的 导入 方法 相同 ， 导 和 后 同样 显示 在 “项 目 ” 面 板 中 。 


了 2. 导入 多 个 素材 


执行 “文件 >“ 导入 ”>“ 多 个 文件 ”命令 ,或 按 快捷 键 Ctt+Alt+l， 在 弹出 的 “导入 多 个 文件 ” 
对 话 框 中 ， 按 住 Ctrl 键 的 同时 逐个 单 击 需要 导入 的 多 个 素材 文件 ， 如 图 3-41 所 示 。 单 击 “打开 ” 按 
钮 ， 即 可 同时 导入 多 个 素材 文件 ， 在 “项 目 ” 面板 中 可 以 看 到 导入 的 多 个 素材 文件 ， 如 图 3-42 所 示 。 
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3. 导入 素材 序列 


序列 文件 是 指 若干 张 按 顺序 排列 的 图 片 组 成 的 一 个 图 片 序列 ， 每 张 图 片 代表 一 个 帧 ， 用 来 记录 
运动 的 影像 。 

执行 “文件 >“ 导 入 ”> “文件 ”命令 ， 在 弹出 的 “导入 文件 ”对 话 框 中 选择 顺序 命名 的 一 系 
列 素材 中 的 第 1 个 素材 ， 并 且 勾 选 对 话 框 下 方 的 “PNG 序列 ” 复 选 框 ， 如 图 3-43 所 示 。 单 击 “ 导 入 ” 
按钮 ， 即 可 将 一 般 导 入 后 的 序列 图 像 为 动态 文件 ， 如 图 3-44 所 示 。 


图 3-44 


在 After Effects 中 导入 图 片 序列 时 ,会 自动 生成 一 个 序列 素材 ， 如 果 将 该 序列 素材 添加 到 “时 间 轴 ”面板 中 ， 可 
以 看 到 该 序列 中 每 一 张 图 片 占据 一 帧 的 位 置 ， 如 果 该 序列 图 片 中 共有 5 张 图 片 ， 则 该 序列 素材 中 共有 5 帧 。 


> 导入 PSD 格式 素材 思 


在 After Effects 中 ， 不 分 层 的 静态 素材 的 导入 方法 基本 相同 ， 但 是 想 要 制作 出 丰富 多 彩 的 视觉 
效果 ， 单 赁 不 分 层 的 静态 素材 是 不 够 的 。 设 计 师 通常 都 会 在 专业 的 图 像 设计 软件 中 设计 效果 图 ， 
导入 After Effects 中 制作 动画 效果 。 

在 After Effects 中 可 以 直接 导入 PSD 或 Al 格式 的 分 层 文件 ， 在 导入 过 程 中 ， 可 以 设置 如 何 对 文 
件 中 的 图 层 进行 处 理 ， 是 将 图 层 合并 为 单一 的 素材 ， 还 是 保留 文件 中 的 图 层 。 

执行 “文件 ” >“ 导入 ”> "文件 ”命令 ， 在 弹出 的 “导入 文件 ”对 话 框 中 选择 一 个 需要 导入 的 
PSD 文件 ， 单 击 “ 导 入 ”按钮 ， 弹 出 设置 对 话 框 ， 如 图 3-45 所 示 。 在 “导入 种 类 ”下 拉 列 表 中 忌 
以 选择 将 PSD 文件 导入 为 哪 种 类 型 的 素材 ， 如 图 3-46 所 示 。 


[5 


© 素材 : 如 果 选 择 “ 素 材 ” 选 项 ， 在 该 对 话 框 中 可 以 选择 将 PSD 文件 中 的 医 
为 静态 素材 ， 


图 3-45 图 3 
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或 者 是 选择 PSD 文件 中 某 个 指定 的 图 层 ， 将 其 导入 为 静态 


回合 成: 如 果 选择 “合成 ”选项 ， 则 可 以 将 所 选择 的 PSD 文件 导入 为 一 


个 图 层 在 合成 中 都 是 一 个 独立 的 图 层 ， 并 且 会 将 PSD 文件 中 所 有 图 的 尺寸 大 小 统一 为 合成 的 


尺寸 大 小 。 


ed 
合成 ， 


层 进行 合并 后 再 导入 


PSD 文件 中 的 每 


加 合成 -保持 图 层 大 小 : 如 果 选 择 “ 合 成 - 保持 图 层 大 小 ”选项 ， 则 可 以 将 所 选择 的 PSD 文件 导 
入 为 一 个 合成 ， PSD 文件 的 每 一 个 图 层 都 作为 合成 的 一 个 单独 层 ， 并 保持 它们 原始 的 尺寸 不 变 。 


实例 01 一 通过 导入 PSD 格式 文件 创建 合成 ”多 


源 文件 ， 源 文件 \ 第 3 章 \3-4-2.aep 视频 : 视频 \ 第 3 章 \3-4-2.mp4 


加 在 Photoshop 中 J 开 一 个 设计 好 的 PSD 素材 文件 “ 源 文件 \ 第 3 章 \ 素 材 向 
34201.psd”， 打 开 “ 图 层 ” 面 板 ， 可 以 看 到 该 PSD 文件 中 的 相关 区 展 ， 如 桥 
所 示 。 打 开 After Effects， 执 行 “文件 ”> “导入 ”> “文件 ”命令 ， 在 弹出 的 “导入 文件 ”对 话 框 中 
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选择 该 PSD 素材 文件 ， 如 图 3-48 所 示 。 


单 击 


图 3-47 图 3-48 


“导入 ”按钮 ， 弹 出 设置 对 话 框 ， 在 “导入 种 类 ”下 拉 列 表 吕 


大 小 ”选项 ， 如 医 


板 中 可 以 看 到 


动 创建 的 合成 ， 如 图 3-50 所 示 。 


pb 选择 


“合成 - 保持 
3-49 所 示 。 单 击 “ 确 定 ”按钮 ， 即 可 将 该 PSD 素材 文件 导入 为 合成 , 在 “项 目 ” 


Bl 


国 。、 Te 


图 3-50 


Pry 于 Ss 3 


将 PSD 文件 导入 为 合成 时 ，After Effects 将 会 自动 创建 一 个 与 PSD 文件 名 称 相同 的 合成 和 一 个 素材 文件 来， 该 
文件 夹 中 为 所 导入 PSD 素材 文件 中 每 个 图 层 上 的 图 像素 材 


有 3 在 “项 目 ” 面 板 中 双击 自动 创建 的 合成 ， 可 以 在 “合成 ”窗口 中 看 到 该 合成 的 效果 与 PSD 
素材 的 效果 完全 一 致 ， 如 图 3-51 所 示 。 并 且 在 “时 间 轴 ”面板 中 可 以 看 到 图 层 与 PSD 文件 中 的 区 
层 是 相对 应 的 ， 如 图 3-52 所 示 。 


图 3-51 图 3-52 
有 执行 “文件 ” >“ 保存 ”命令 ， 弹 出 “另存 为 ”对 话 框 ， 将 该 文件 进行 保存 。 
73 1 格式 素材 文件 @ 


导入 Al 格式 素材 文件 的 方法 与 导入 PSD 格式 素材 文件 的 方法 基本 相同 ， 需 要 注意 的 是 ， 所 导 
入 的 Al 格式 的 素材 文件 ， 必 须 是 包含 多 个 图 层 的 Al 格式 文件 ， 这 样 在 导入 时 才 可 以 将 该 Al 格式 素 


材 文件 导入 为 合成 ， 如 果 该 Al 格式 的 素材 文件 中 并 没有 分 层 ， 则 导入 After Effects 中 将 是 一 个 静态 
的 矢量 素材 。 


源 文件 ， 源 文件 \ 第 3 章 \3-4-3.aep 视频 : 视频 \ 第 3 章 \3-4-3.mp4 

2 在 llustrator 中 打开 一 个 设计 好 的 Al 素材 文件 “ 源 文件 \ 第 3 章 \ 素 材 
\34301.aii， 打 开 “ 图 层 ” 面板， 可 以 看 到 该 Al 文 件 中 的 相关 图 层 ， 如 图 3-53 所 示 。 
打开 After Effects， 执行 “文件 ” >“ 导入 ”> “文件 ”命令 ， 在 弹出 的 “导入 文件 ”对 话 框 中 选择 该 
Al 格式 素材 文件 ， 如 图 3-54 所 示 。 


启 


”对 话 框 中 ， 选择 9 
材 ”“ 合 成 - 保存 图 层 大 小 ”和 “合成 ” 
的 选项 类 型 


入 为 ”下 拉 列 表 中 包含 3 个 选项 , 分 别 是 “ 素 
“导入 ”按钮 ， 即 可 将 选择 素材 导入 为 所 选择 


有 0 四 单 击 “导入 ”按钮 ， 弹 出 设置 对 话 框 ， 在 “导入 种 类 ”下 拉 列 表 中 选择 “合成 ”选项 ， 如 
到 3-55 所 示 。 单 击 “ 确 定 ” 按 钮 ， 即 可 将 该 Al 格式 素材 文件 导入 为 合成 ， 在 “项 目 ”面板 中 可 以 
看 到 自动 创建 的 合成 ， 如 图 3-56 所 示 。 


图 3-55 扫 3-56 
JB 在“ 项目” 面板 中 双击 自动 创建 的 合成 ， 可 以 在 “合成 ”窗口 中 看 到 该 合成 的 效果 与 Al 格 
式 素 材 的 效果 完全 一 致 ， 如 图 3-57 所 示 。 并 且 在 “时 间 轴 ”面板 中 可 以 看 到 图 层 与 Al 格式 素材 
件 中 的 图 层 是 相对 应 的 ， 如 图 3-58 所 示 。 
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名 执行 “文件” >“ 保存" 命令， 弹出 “另存 为 ”对 话 框 ， 将 该 文件 保存 。 


导入 PSD 或 AI 格式 的 分 层 文件 最 大 的 优势 就 在 于 能 够 自动 创建 合成 ， 并 且 能 够 保留 PSD 或 AI 格式 文件 中 的 图 
层 ， 这 样 就 可 以 直接 在 “时 间 轴 ”面板 中 制作 各 图 层 中 元 素 的 动画 效果 ， 非 常 方便 。 


素材 的 管理 操作 


完成 导入 素材 的 操作 后 , 这 些 素材 只 是 出 现在 "项目" 面板 中 , 如 果 想 要 进一步 对 项 目 进行 编辑 ， 
就 需要 对 这 些 素材 进行 一 些 基本 的 操作 。 


ETTD 
除了 在 导入 PSD 格式 或 Al 格式 的 分 层 素材 文件 时 选择 “合成 ”选项 ， 将 其 导入 为 合成 ， 其 他 
导入 的 素材 都 只 会 出 现在 “项 目 ”面板 中 ， 而 不 会 应 用 到 合成 中 ， 在 制作 动画 的 过 程 中 ， 可 以 将 “项 
目 ” 面 板 中 的 素材 添加 到 合成 中 从 而 制作 其 动画 效果 。 
在 项 目 文件 中 新 建 合成 后 ， 如 果 需 要 在 该 合成 中 使 用 相应 的 素材 ， 可 以 在 “项 目 ” 面 板 中 将 该 
素材 拖 入 “合成 ”窗口 中 ， 如 图 3-59 所 示 。 或 者 在 “项 目 ”面板 中 将 该 素材 拖 入 “时 间 轴 ”面板 中 
的 图 层 位 置 ， 如 图 3-60 所 示 ， 释 放 鼠 标 即 可 在 “合成 ”窗口 中 对 所 添加 的 素材 进行 编辑 ， 在 “时 间 
轴 ” 面 板 中 可 以 制作 该 素材 的 动画 效果 。 


图 3-59 图 3-60 


2. 使 用 文件 夹 归 类 素材 


在 使 用 After Effects 编辑 动画 时 ， 往 往 需要 大 量 的 素材 ， 素 材 又 可 以 分 为 很 多 种 ， 包 括 静 态 医 
像素 材 、 声 音素 材 、 合 成 素材 等 ， 用 户 可 以 分 别 创建 相应 的 文件 夹 来 放置 不 同类 型 的 素材 ， 从 而 方 
便 使 用 时 快速 查找 ， 提 高 工作 效率 。 
执行 “文件 ” >“ 新建 ”> “新建 文件 夹 ”命令 ， 即 可 在 “项 目 ”面板 中 新 建 一 个 文件 夹 ， 所 新 
建 的 文件 夹 自动 进入 重 命名 状态 ， 可 以 直接 输入 文件 夹 的 名 称 ， 如 图 3-61 所 示 。 完 成 文件 夹 的 新 建 
后 , 可 以 在 “项 目 ” 面板 中 选中 一 个 或 多 个 素材 , 将 其 拖 入 文件 夹 中 , 即 可 移动 素材 , 如 图 3-62 所 示 。 
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对 于 多 余 的 素材 或 文件 夹 ， 应 该 及 时 进行 删除 ， 删 除 素材 或 文件 夹 的 方法 很 简单 ， 选 择 需 要 删 
除 的 素材 或 文件 夹 ， 按 Delete 键 即 可 将 其 删除 ， 也 可 以 选择 需要 删除 的 素材 或 文件 来, 单 击 “项 目 ” 
面板 底部 的 “删除 选择 的 项 目 ” 按 钮 即 可 。 
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图 3-61 


4 符 换 素材 


在 After Effects 中 进行 动画 处 理 时 ， 如 果 发 现 导 入 的 素材 不 够 精美 或 效果 不 满意 ， 可 以 通过 替 
换 素 材 的 方式 来 修改 。 

在 “项 目 ”面板 中 选择 需要 替换 的 素材 ， 执 行 “ 文 件 ”> “替换 素材 ”> “文件 ”命令 ， 或 者 在 
当前 素材 上 右 击 , 在 弹出 的 菜单 中 执行 "替换 素材 " > "文件 " 命令, 如 图 3-63 所 示 , 即 可 在 弹出 的 “ 蔡 
换 素材 文件 ”对 话 框 中 选择 要 替换 的 素材 ， 如 图 3-64 所 示 ， 单 击 “ 导 入 ”按钮 ， 即 可 完成 替换 素材 
的 操作 。 


基于 所 迁 项 新 建 合 或 
营 漳 为 预 合成 (使 用 1 次 ) 
创建 代理 
设置 代理 
解 琵 素 村 
莹 灌 素 材 
重新 加 戏 素 材 
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加 3-63 图 3-64 
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在 After Effects 中 ， 导 入 的 素材 文件 都 被 放置 在 “项 目 ” 面 板 中 ， 在 该 面板 的 素材 列表 中 选中 
某 个 素材 ， 即 可 在 该 面板 的 预览 区 域 中 看 到 该 素材 的 缩 览 图 和 相关 信息 ， 如 图 3-65 所 示 。 如 果 想 
查看 素材 的 大 图 效果 ， 可 以 直接 双击 “项 目 ” 面 板 中 的 素材 ， 系 统 将 根据 不 同类 型 的 素材 打开 不 后 
的 浏览 模式 。 双 击 静 态 素 材 将 打开 “素材 ”面板 ， 如 图 3-66 所 示 。 双 击 动态 素材 将 打开 对 应 的 视频 
播放 软件 来 预览 。 


本 一 合成 的 族 套 


嵌 套 操作 用 于 素材 繁多 的 动画 项 目 。 例 如 ， 可 以 通过 一 个 合成 制作 动画 的 背景 ， 再 使 用 另 一 个 
合成 制作 动画 元 素 ， 最 终 将 动画 元 素 的 合成 添加 到 动画 背景 的 合成 中 ， 通 过 合成 的 媒 套 便于 对 不 
同 素材 的 管理 与 操作 。 

创建 合成 戏 套 有 两 种 方法 。 

第 1 种 方法 : 在 “项 目 ” 面 板 中 将 某 个 合成 拖 皂 至 “时 间 轴 ”面板 的 图 层 中 ， 将 其 作为 素材 添 
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加 到 当前 所 制作 的 合成 中 ， 从 而 实现 合成 的 媒 套 ， 如 图 3-67 所 示 。 


图 3-66 


图 3-67 
第 2 种 方法 : 在 “时 间 轴 ”面板 中 选择 一 个 或 多 个 图 层 , 执行 “图 层 ” >“ 预 合成 " 命令 , 弹出 “ 预 
合成 ”对 话 框 ， 对 相关 选项 进行 设置 ， 如 图 3-68 所 示 。 单 击 “ 确 定 ” 按 钮 ， 即 可 将 所 选择 的 一 个 或 
多 个 图 层 创建 为 嵌 套 的 合成 ， 如 图 3-69 所 示 。 


坦 
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图 3-69 
“ 预 合成 ”对 话 框 中 各 选项 说 明 如 下 。 


加 “新 合成 名 称 ” 选 项 : 该 选项 用 于 设置 所 创建 的 新 合成 的 名 称 。 

名 “保留 “背景 ' 中 的 所 有 属性 ”选项 : 将 所 有 的 属性 、 动 画 信息 和 效果 保留 在 当前 的 合成 中 
是 将 所 选择 的 图 层 进 行 简单 的 能 套 合 成 处 理 ， 也 就 是 说 所 创建 的 合成 不 会 应 用 当前 合成 中 的 所 
有 属性 设置 ( “背景 ”为 当前 合成 的 名 称 ) 。 

名 “将 所 有 属性 移动 到 新 合成 ”选项 : 如 果 选 择 该 选项 ， 则 表示 将 当前 合成 的 所 有 属性 、 动 画 信 
息 和 效果 都 应 用 到 新 建 的 合成 中 。 

名 “将 合成 持续 时 间 调 整 为 所 选 图 层 的 时 间 范 围 ” 选 项 : 勾 选 该 复 选 枉 ， 则 当 创 建新 合成 时 会 自 
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动 根据 所 选择 的 图 层 的 时 间 范 围 来 设置 合成 的 持续 时 间 。 
名 “打开 新 合成 ”选项 : 勾 选 该 复 选 框 ， 当 创建 新 合成 时 自动 打开 所 创建 的 新 合成 ， 进 入 该 新 合 
成 的 编辑 状态 。 


认识 “时 间 畏 ”面板 5 
After Effects 的 “时 间 轴 ”面板 中 包含 图 层 , 但 是 图 层 只 是 “时 间 轴 ”面板 中 的 一 小 部 分 。" 时 间 轴 ” 
面板 是 在 After Effects 中 进行 动 效 制作 的 主要 操作 面板 ， 在 “时 间 轴 ”面板 中 可 以 通过 对 各 种 控制 选 


项 进行 设置 从 而 制作 出 不 同 的 动画 效果 。 如 图 3-70 所 示 为 After Effects 中 的 “时 间 轴 ”面板 。 
' 音 频 / 视 频 ' 选 项 


' 图 层 基础 选项 转换 控制 "选项 “时 间 控 制 "选项 
图 层 开关 "选项 发 级 和 链接 "选项 
图 3-70 


: “音频 / 视频 “选项 愿 


通过 “时 间 轴 ”面板 中 的 “音频 /视频 ”选项 ， 如 图 3-71 所 示 ， 可 以 对 


合成 中 的 每 个 图 层 进行 一 些 基础 的 控制 。 
加 “视频 ”按钮 图 : 单 击 该 按钮 ， 可 以 在 “合成 ”窗口 中 显示 或 隐藏 该 区 
层 上 的 内 容 。 
加 “音频 ”按钮 E 国 : 如 果 在 某 个 图 层 上 添加 了 音频 素材 ， 则 该 层 上 会 自动 
添加 音频 图 标 ， 可 以 通过 单 击 该 图 层 的 “音频 ”按钮 ， 显 示 或 隐藏 该 区 
层 上 的 音频 。 
“独奏 ”按钮 圈 : 单 击 某 个 图 层 上 的 该 按钮 ， 可 以 在 “合成 ”窗口 中 只 ” 苔 
显示 该 图 层 中 的 内 容 ， 而 隐藏 其 他 所 有 图 层 中 的 内 容 。 图 3-71 
“锁定 ”按钮 图 : 单 击 某 个 图 层 上 的 该 按钮 ， 可 以 锁定 或 取消 锁定 该 区 
层 内 容 ， 被 锁定 的 图 层 将 不 能 被 操作 。 


“图 层 基础 ”选项 _“ 愿 


在 “时 间 轴 ” 面板 的 “图 层 基础 " 选项 设置 区 中 包含 "标签 "“ 编 号 " 和 “图 层 名 称 " 3 个 设置 选项 ， 
如 图 3-72 所 示 。 
句 “标签 ”选项 : 在 每 个 图 层 的 该 位 置 单 击 ， 可 以 在 弹出 菜单 
中 选择 该 图 层 的 标签 颜色 ， 通 过 为 不 同 的 图 层 设置 不 同 的 标 
签 颜色 ， 从 而 可 以 有 效 区 分 不 同 的 图 层 。 
加 “编号 ”选项 : 从 上 至 下 顺序 显示 图 层 的 编号 ， 不 可 以 修改 。 
名 “图 层 名 称 ” 选 项 ， 在 该 位 置 显示 的 是 图 层 名 称 ， 图 层 名 称 
默认 为 在 该 图 层 上 所 添加 的 素材 的 名 称 或 者 是 自动 命名 的 名 
称 , 在 图 层 名 称 上 右 击 , 在 弹出 的 菜单 中 选择 “ 重 命名 " 命令 ， 


可 以 对 图 层 名 称 进行 重 命名 。 
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“图 层 开关 ”选项 


单 击 “ 时 间 轴 " 面板 左下 角 的 “展开 或 折叠 “图 层 开 关 ? 
窗 格 ”按钮 圈 ， 可 以 在 “时 间 轴 ”面板 中 的 每 个 图 层 名 称 
右 侧 显示 相应 的 “图 层 开关 ”控制 选项 ， 如 图 3-73 所 示 。 
@@ “ 消 隐 ” 按钮 图 : 单 击 “ 时 间 轴 ”面板 中 的 “隐藏 为 
其 设置 了 “ 消 隐 ” 开 关 的 所 有 图 层 ” 按 甸 图 ， 单 击 区 
层 的 " 消 隐 ” 按 甸 图， 可 以 在 “时 间 轴 ”面板 中 隐藏 
该 图 层 。 
@@ “ 栅 格 化 ”按钮 图 : 仅 当 图 层 中 的 内 容 为 合成 或 矢量 
图 形 时 ， 单 击 该 图 层 的 “ 栅 格 化 ”按钮 ， 可 以 栅 格 化 图 3-73 
该 图 层 ， 栅 格 化 后 的 图 层 质量 会 提高 而 且 演 染 速度 会 加 快 。 
名 “质量 和 采样 ”按钮 圈 : 单 击 图 层 的 “质量 和 采样 ”按钮 ， 可 以 将 该 图 层 中 的 内 容 在 “ 低 质量 ” 
和 “高 质量 ”这 两 种 显示 方式 之 间 进 行 切换 。 
加 “效果 ”按钮 圈 : 如 果 为 图 层 内 
[以 显示 或 隐藏 为 该 图 层 所 应 用 的 效果 。 
@@ ”“ 帧 混合 ”按钮 图 : 如 果 为 图 层 内 容 应 用 了 帧 混合 效果 ， 则 该 图 层 将 显示 “ 帧 混合 ”按钮 ， 单 
击 该 按钮 ， 可 以 显示 或 隐藏 为 该 图 层 所 应 用 的 帧 混合 效果 。 
© 
© 
© 
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驯 


容 应 用 了 效果 ， 则 该 图 层 将 显示 “效果 ”按钮 ， 单 击 该 按钮 ， 
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“运动 模糊 ”按钮 圈 : 用 于 设置 是 否 开启 图 层 的 运动 模糊 功能 ， 默 认 情况 下 没有 开启 图 层 的 运 
动 模糊 功能 。 
- 师 整 国 导 按钮 圆 : 单 击 该 按钮 ， 仅 显示 “调整 图 层 ” 上 所 添加 的 效果 ， 从 而 达到 调整 下 方 
“3D 图 层 ” 按 氏 国 | 单 击 该 按钮 ， 可 以 将 普通 的 2D 图 层 转 换 为 3D 图 层 。 


“转换 控制 ”选项 E 


单 击 “ 时 间 轴 ”面板 左下 角 的 “展开 或 折 又 “转换 控制 ” 窗 格 ” 按 
钮 图 ， 可 以 在 “时 间 轴 ”面板 中 显示 出 每 个 图 层 的 “转换 控制 ”选项 ， 如 
图 3-74 所 示 。 
名 “模式 ”选项 : 在 该 下 拉 列 表 中 可 以 设置 图 层 的 混合 模式 。 

全 “保留 基础 透明 度 " 选 项 该 选项 用 于 设置 是 否 保留 图 层 的 基础 透明 度 。 
句 “TrkMat ( 轨道 庶 罩 ) ”选项 : 在 该 下 拉 列 表 中 可 以 设置 当前 图 层 与 


上 | 


其 上 方 图 层 的 轨道 庶 淖 方式 ， 在 该 下 拉 列 表 中 包含 5 个 选项 ， 如 图 图 3-74 
3-75 所 示 。 
句 ”没有 轨道 遮 罩 : 该 图 层 正常 显示 , 不 使 用 庶 淖 效果 。 ”| 9 ”没有 轨道 迁 军 
该 选项 为 默认 选项 。 Alpha 遮 军 “[33305.png]" 
句 ”Alpha 遮 罩 : 利用 素材 的 Alpha 通道 创建 轨道 庶 量 。 Alpha 反 转 遮 军 “[33305.png]" 
名 ”Alpha 反 转 遮 章 : 反 转 素材 的 Alpha 通道 创建 轨道 完 度 庶 军 “[33305.png]” 
遮 罩 。 亮度 反 转 造 去 “[33305.png]" 
加 亮度 遮 章 : 利用 素材 的 亮度 创建 轨道 遮 秋 。 图 3.75 
名” 亮度 反 转 遮 罩 : 反 转 素材 的 亮度 通道 创建 轨道 遮 罩 。 


“ 父 级 和 链接 " 
父子 链接 是 让 图 层 与 图 层 之 间 建 立 从 属 关系 的 一 种 功能 ， 当 对 父 对 象 进行 操作 的 时 候 子 对 象 也 


会 执行 相应 的 操作 ， 但 子 对 象 执行 操作 的 时 候 父 对 象 不 会 发 生变 化 。 


和 3 章 Mter fffects 软件 基础 操作 


在 “时 间 轴 ”面板 中 有 两 种 设置 父子 链接 的 方式 。 一 种 是 拖 动 图 层 的 
图 标 到 目标 图 层 , 这样 目 标 图 层 为 该 图 层 的 父 级 图 层 , 而 该 图 层 为 子 医 
一 种 方法 是 在 图 层 的 该 下 拉 列 表 中 选择 一 个 图 层 作 为 该 图 层 的 父 级 图 层 
到 3-76 所 示 。 


兰 澡 图 


单 击 "时间 轴 " 面板 左下 角 的 “展开 或 折叠 “入 点 '/ “出 点 '/“ 持 续 时 间 ”/“ 伸 
缩 : 窗 格 ”按钮 国 ， 可 以 在 “时 间 轴 ”面板 中 显示 出 每 个 图 
层 的 “时 间 控 制 ” 选 项 ， 如 图 3-77 所 示 。 
句 “入 点 ”选项 : 此 处 显示 当前 图 层 的 入 点 时 间 。 如 果 在 

此 处 单 击 , 可 以 弹出 “图 层 入 点 时 间 ” 对 话 框 , 如 图 3-78 

所 示 ， 输 入 要 设置 为 入 点 的 时 间 ， 单 击 “确定 ”按钮 
即 可 完成 该 图 层 入 点 时 间 的 设置 。 
名 “出 点 "选项 此 处 显示 当前 图 层 的 出 点 时 间 。 如 果 在 此 处 单 击 , 可 以 弹出 "图 层 出 点 时 间 " 对 话 框 ， 
如 图 3-79 所 示 , 输入 要 设置 为 出 点 的 时 间 , 单 击 “确定 ” 按钮, 即 可 完成 该 图 层 出 点 时 间 的 设置 。 
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图 3-79 
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默认 情况 下 ， 添 加 到 “时 间 轴 ”面板 中 的 素材 都 会 保持 与 当前 合成 相同 的 时 间 长 度 ， 如 果 需 要 在 某 个 时 间 点 显 
示 该 图 层 中 的 ! 而 在 某 个 时 间 点 该 图 层 中 的 内 藏 , 则 可 以 为 该 图 层 设置 “入 点 ”和 ,简单 地 理解 ， 
“人 点 ”和 “出 点 ”选项 就 相当 于 设置 该 图 层 内 容 在 什么 时 间 出 现在 合成 中 ， 什 么 时 间 在 合成 中 隐 妈 层 内 容 。 


人 “持续 时 间 ” 选 项 显示 当前 图 层 上 从 入 点 到 出 点 的 时 间 范 围 , 也 就 是 起 点 到 终点 之 间 的 持续 时 间 。 
如 果 在 此 处 单 击 , 可 以 弹出 “时 间 伸 缩 " 对 话 框 , 如 图 3-80 所 示 , 修改 该 图 层 中 内 容 的 持续 时 间 。 
介 “伸缩 "选项 调整 动画 的 长 度 , 控制 其 播放 速度 以 达到 快 放 或 慢 放 的 效果 。 如 果 在 此 处 单 击 ， 
可 以 弹出 “时 间 伸 缩 ” 对 话 框 ， 如 图 3-81 所 示 ， 可 以 修改 该 图 层 的 “ 拉 伸 因数 ”选项 。 该 选项 


的 默认 值 为 100%。 如 果 大 于 100% ， 则 动画 就 会 在 长 度 不 变 的 情况 下 变 慢 ; 如 果 小 于 100%， 
则 动画 会 变 快 。 
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[3.6 mn After Effects 图 层 2》 - 

在 After Effects 中 的 图 层 类 似 于 Photoshop 中 的 图 层 ， 在 制作 交互 动 效 的 时 候 所 有 操作 都 必须 
在 图 层 的 基础 上 完成 ， 所 不 同 的 是 After Effects 中 的 图 层 包括 多 种 类 型 ， 通 过 利用 不 同 的 类 型 图 层 来 
组 织 素材 。 将 素材 拖 入 “时 间 轴 ”面板 时 就 形成 了 素材 层 ， 通 过 调整 “大 小 ” “位移 ”和 “不 透明 度 ” 
等 属性 可 以 完成 简单 的 动画 ; 灯光 层 可 以 用 于 对 合成 中 的 灯光 进行 调节 ， 也 可 以 用 于 制作 出 绚丽 的 
灯光 动画 ;文字 层 可 以 用 于 在 合成 中 输入 文字 、 制 作文 字 动画 等 。 


在 After Effects 中 图 层 共有 10 种 ， 分 别 为 素材 层 、 文 字 层 、 纯 色 层 、 灯 光 层 、 摄 像 机 层 、 空 对 
象 层 、 形 状 图 层 、 调 整 图 层 、Adobe Photoshop 文件 和 MAXON CINEMA 4D 文件 ， 下 面 对 一 些 在 交 
互动 效 制作 过 程 中 常 使 用 的 图 层 进行 简单 介绍 。 


素材 层 是 通过 将 外 部 的 图 像 、 音 频 、 视 频 导入 After Effects 软件 中 ， 添 加 到 “时 间 轴 ”面板 中 


自动 生成 的 图 层 ， 可 以 通过 设置 “变换 ”属性 达到 移动 、 缩 放 、 透 明 等 效果 。 如 图 3-82 所 示 为 新 建 
的 素材 层 。 


图 3-82 


After Effects 中 的 文字 层 能 够 在 动画 中 添加 相应 的 文字 及 文字 动画 ， 单 击 工具 栏 中 的 “ 横 排 文字 
工具 ”按钮 或 “ 直 排 文字 工具 ”按钮 ， 在 “合成 ”窗口 中 单 击 ， 输 入 文字 ， 即 可 在 “时 间 轴 ”面板 
中 自动 创建 文字 图 层 ， 如 图 3-83 所 示 。 创 建文 字 图 层 后 ， 可 以 在 “字符 ”面板 中 对 文字 的 大 小 、 颜 
色 、 字 体 等 进行 设置 ， 如 图 3-84 所 示 ， 设 置 方法 与 Photoshop 中 的 “字符 ”面板 相似 。 


图 3-83 


岳 


操作 


纯色 层 在 交互 动 效 中 主要 用 来 制作 蒙 版 效果 ， 同 时 也 可 以 作为 承载 编辑 的 图 层 ， 在 纯色 层 上 制 
作 各 种 效果 。 执 行 “图 层 ”> “新 建 ”> “纯色 ”命令 ， 弹 出 “纯色 设置 ”对 话 框 ， 如 图 3-85 月 


所 示 。 
在 对 话 框 中 完成 相关 选项 的 设置 ， 单 击 “ 确 定 ” 按 钮 ， 即 可 创建 一 个 纯色 图 层 ， 如 图 3-86 所 示 。 


图 3-85 
4. 灯光 层 ” ) 


灯光 层 用 来 模拟 不 同 种 类 的 真实 光源 ， 如 家 用 电灯 、 舞 台灯 等 。 灯 光 层 中 包含 4 种 灯光 类 型 ， 
放 别 为 平行 光 、 聚 光 、 点 光 和 环境 光 ， 不 同 的 灯光 类 型 可 以 营造 出 不 同 的 灯光 效果 。 
执行 “图 层 ” > “新 建 ” >“ 灯光 ”命令 ， 弹 出 “灯光 设置 ”对 话 框 ， 如 图 3-87 所 示 。 完 成 “ 灯 
光 设置 ”对 话 框 中 相关 选项 的 设置 ， 单 击 “ 确 定 ”按钮 ， 即 可 创建 一 个 灯光 层 ， 如 图 3-88 所 示 。4 
光 只 对 3D 图 层 产 生效 果 ， 因 此 需要 添加 光照 效果 的 图 层 必 须 开 启 3D 图 层 开关 。 


图 3-88 
摄像 机 层 榨 制 合成 最 后 的 显示 角度 ， 也 可 以 通过 对 摄像 机 层 创建 动画 来 完成 一 些 特殊 的 效 
果 。 想 要 通过 摄像 机 层 制作 特殊 效果 就 需要 3D 图 层 的 配合 ， 因 此 必须 将 图 层 上 的 3D 开关 打开 。 


执行 "图 层 " > “新 建 " >“ 摄像机” 命令, 弹出 “摄像 机 设置 "对话 框 , 如 
像 机 设置 ”对 话 框 d 


到 3-89 所 示 。 完成 “ 摄 
Pp 相关 选项 的 设置 ， 单 击 “ 确 定 ”按钮 ， 即 可 创建 一 个 摄像 机 层 ， 如 图 3-90 所 示 。 


空 对 象 层 是 没有 任何 特殊 效果 的 图 层 ， 它 主要 用 于 辅助 动画 的 制作 ， 通 过 新 建 空 对 
层 建 立 父 子 对 象 ， 从 而 控制 多 个 图 层 的 


象 层 并 以 该 
运动 或 移动 ， 也 可 以 通过 修改 空 对 象 层 上 的 参数 同时 修改 多 
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个 子 对 象 参数 ， 控 制 子 对 象 的 合成 效果 。 


图 3-89 图 3-90 
执行 “图 层 ”>“ 新 建 ” >“ 空 对 象 ” 命令 , 即 可 新 建 空 对 象 展 ， 如 图 3-91 所 示 。 空 对 象 层 在 “ 合 
成 ”窗口 中 显示 为 一 个 与 该 图 层 颜色 相同 的 透明 边框 ， 如 图 3-92 所 示 ， 但 在 输出 时 空 对 象 层 是 没有 
任何 内 容 的 。 


图 3-91 图 3-92 


如 果 需 要 在 图 层 中 创建 父子 元 素 链接 ， 可 以 通过 
或 者 在 子 对 象 上 的 链接 按 自 i 的 下 拉 列 表 中 选择 父 层 


形状 图 层 是 指使 用 After Effects 中 的 
各 种 矢量 绘图 工具 绘制 图 形 所 得 到 的 医 
状 图 层 ， 可 以 执行 “图 
“形状 ” 命令 ,创建 一 个 
也 可 以 直接 单 击 工具 栏 
中 的 和 矩形 、 圆 形 、 钢 笔 工 具 等 绘图 工具 ， 
制 形状 图 形 ， 同 样 忆 

尺 得 到 形状 图 层 ， 如 图 3-93 所 示 。 


调整 图 层 是 用 于 调节 动画 中 的 色彩 或 者 特效 的 图 层 ， 在 该 图 层 上 制作 效果 可 对 该 图 层 下 方 所 有 

到 层 应 用 该 效果 ， 因 此 调整 图 层 对 控制 动画 的 整体 色调 具有 很 重要 的 作用 。 

执行 “图 层 ”>“ 新 建 ” >“ 调 整 图 层 ” 命 令 ， 即 可 新 建 一 个 调整 图 层 ， 如 图 3-94 所 示 。 为 调 
到 层 添加 相应 的 特效 设置 前 后 效果 对 比 ， 如 图 3-95 所 示 。 


网 


图 3-94 图 3-95 


区 图 层 的 混合 模式 (@ 


在 After Effects 中 进行 合成 的 时 候 ， 图 层 之 间 可 以 通过 混合 模式 来 实现 一 些 特殊 的 融合 效果 。 
当 某 一 层 使 用 混合 模式 的 时 候 ， 会 根据 所 使 用 的 混合 模式 与 下 层 图 像 进行 相应 的 融合 而 产生 特殊 的 


在 “时 间 轴 ” 面 板 中 单 击 “ 展 开 或 折 肢 “转换 控制 ” 窗 格 ” 按 钮 圈 ， 在 “时 间 轴 ”面板 中 显 
示 出 “模式 ”控制 选项 ， 如 图 3-96 所 示 。 在 “模式 ”下 拉 列 表 中 可 以 设置 图 层 的 混合 可 式 如 
图 3-97 所 示 。 


"I EE 
(Alphe 
全 上 并 
EE] 所 Alphe 
1 从 机 六 
Alphe 大 加 
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图 3-96 所 3-97 
“模式 ” ee 许多 混合 模式 选项 与 Photoshop 中 图 层 的 混合 模式 选项 相同 ， 
选择 不 同 的 混合 模式 选项 ， 会 使 当前 图 层 与 其 下 方 的 图 层 产 生 不 同 的 混合 效果 ， 默 认 的 图 层 混 合 模 
式 为 “正常 ”。 


实例 03 一 快速 制作 图 片 素 © 


源 文件 ， 源 文件 \ 第 3 章 \3-6-2.aep 视频 : 视频 \ 第 3 章 3-6-2.mp4 


到 在 Afer Effects 中 新 建 一 个 空白 的 项 目 , 执行 文件 " > "导入" > "文件 央 
命令 ， 在 弹出 的 “导入 文件 ”对 话 框 中 选择 导入 的 素材 文件 “ 源 文 件 \ 第 3 章 \ 素 “回民 
材 \36201.psd”， 如 图 3-98 所 示 。 单 击 “ 导 入 ”按钮 ， 弹 出 设置 对 话 框 ， 如 图 3-99 所 示 。 


rl 
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可 以 看 到 自动 创建 的 合成 ， 


图 3-98 
有 0 如 单 击 “ 确 定 ”按钮 ， 导 入 该 PSD 素材 文件 ， 在 “项 目 ” 面 板 吕 
如 图 3-100 所 示 。 在 “项 目 ” 面 板 中 双击 自动 创建 的 合成 , 在 “合成 ”窗口 中 可 以 看 到 该 合成 的 效果 ， 
如 图 3-101 所 示 。 


图 3-101 
层 ， 将 不 需要 制作 淡 入 滩 册 


图 3-100 
和 在 “时 间 轴 ”面板 中 可 以 看 到 该 合成 d 
材 图 层 锁定 ， 如 图 3-102 所 示 。 


的 相关 素材 医 


图 3-102 
的 菜单 中 选择 "合成 设置 
“确定 ”按钮 ， 完 成 “ 合 


设置 "命令 ,如 图 3-103 所 示 。 


单 击 


的 合成 名 称 上 右 击 ,在 弹出 


了》 在" 项目" 面板 
弹出 “合成 设置 ”对 话 框 ， 修改“ 持续 时 间 ” 为 88， 如 医 
成 设置 ”对 话 框 的 设置 。 
面板 中 同时 选中 需要 制作 淡 入 淡出 动画 的 “背景 1” 至 “背景 4” 图 层 ， 如 
”命令 ， 弹 出 “序列 图 层 ” 对 话 框 ， 如 


) 喝 在 “时 间 轴 ” 
到 3-105 所 示 。 执 行 “动画 


到 3 一 106 所 示 。 


”> “关键 帧 辅助 ”> “序列 图 层 ” 命 


区 


用 层 重 乔 效 果 ; 
| 在 该 下 拉 列 表 


为 20 秒 ， 


“确定 ”按钮 ， 完 成 “序列 图 层 
hb 选择 “合成 设置 


合成 设置 .… 


在 基本 图 撒 Ee 


NE 


习 站 如 


图 3-105 


对 话 框 中 ， 


续 时 间 ” 选项 用 于 设置 
中 包含 3 个 选项 ， 久 


又 溶解 前 景 和 背景 


到 3 一 108 所 示 。 


图 3-104 


重合 ” 复 选 框 ， 可 以 启 
和 rian 的 重合 过 渡 方 式 ， 


o 在 “项 目 ” 面 板 中 的 合成 名 称 上 右 击 ， 
上 “合成 设置 ”对话 框 , 修改 “持续 时 间 ” 


辐 3-107 所 示 。 弹出 


0 到 单 


J 将 匀 


图 3-107 


十 “确定 ”按钮 ， 完 成 “合成 设置 ”对 话 框 的 设置 ， 


a 层 解锁 ， 


图 3-108 


“时 间 轴 ”面板 如 图 3-109 所 示 。 
”选项 , 修改 “状态 栏 ”“ 时 间 ” 


和 “解锁 图 标 ” 个 素材 


层 的 “持续 时 间 ” 为 20 秒 ， 如 医 


3-110 所 示 。 
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图 3-109 


图 3-110 
23) 完成 图 片 淡 入 淡出 动 效 的 制作 ， 执 行 “ 文 件 ”> “保存 ”命令 ， 将 文件 保存 为 “ 源 文件 \ 第 


3 章 \3-6-2.aep”。 单 击 “预览 ”面板 上 的 “播放 /停止 ”按钮 圈 ， 可 以 在 “合成 ”窗口 中 预览 
画 效果 ， 如 图 3-111 所 示 。 


图 3-111 


在 After Effects 中 完成 动 效 的 制作 后 ， 还 可 以 将 动 效 进行 泻 染 输出 ， 关 于 泻 染 输出 动 效 的 方法 将 在 本 书 第 4 章 中 
进行 详细 讲解 。 


[4 


RSRRR 人 第 3 章 ，After Effects 软件 基础 操作 


| Ws 

3.7 轿 图 层 的 基础 “变换 ”属性 ? 
在 图 层 左 侧 的 小 三 角 按钮 上 单 击 , 可 以 展开 该 图 层 的 相关 属性 , 素材 图 层 默认 包含 “变换 "属性 ， 
单 击 “ 变 换 ” 选 项 左 侧 的 三 角 按钮 ， 可 以 看 到 包含 5 个 基础 变换 属性 ， 分 别 是 “ 锚 点 ” “位置 ”' 缩 
放 " “旋转 ”和 “不 透明 度 ”， 如 图 3-112 所 示 。 


图 3-112 


“ 锚 点 ”属性 主要 用 来 设置 素材 的 中 心 点 位 置 。 素 材 的 中 心 点 位 置 不 同 ， 则 当 对 素材 进行 缩放 、 
旋转 等 操作 时 ， 所 产生 的 效果 也 会 不 同 。 
默认 情况 下 ， 素 材 的 中 心 点 位 于 素材 图 层 的 中 心 位 置 。 选 择 某 个 图 层 ， 按 快捷 键 A， 可 以 直接 
在 该 图 层 下 方 显示 出 “ 锚 点 ”属性 ， 如 果 需 要 修改 锚 点 ， 只 需要 修改 “ 锚 点 ”属性 后 的 坐标 参数 即 可 ， 
如 图 3-113 所 示 。 或 者 在 “合成 ”窗口 中 双击 需要 设置 的 素材 ， 进 入“ 素材” 窗口， 使 用 “选择 工具 ” 
直接 移动 锚 点 ， 即 可 调整 素材 的 中 心 点 位 置 ， 如 图 3-114 所 示 。 


图 3-114 


“位 置 ”属性 用 来 控制 素材 在 “合成 ”窗口 中 的 相对 位 置 ， 也 可 以 通过 该 属性 结合 关键 帧 制作 
出 素材 移动 的 动画 效果 。 

选择 相应 的 图 层 ， 按 快捷 键 P， 可 以 直接 在 所 选择 图 层 下 方 显 示 出 “位 置 ”属性 ， 如 图 3-115 
所 示 。 当 修改 “位 置 ” 属 性 后 的 坐标 参数 或 者 在 “合成 ”窗口 中 直接 使 用 “选择 工具 ”移动 位 置 时 ， 
都 是 以 素材 锚 点 为 基准 进行 移动 ， 如 图 3-116 所 示 。 
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图 3-115 


源 文件 : 源 文件 \ 第 3 章 \3-7-2.aep 视频: 视频 \ 第 3 章 \3-7-2.mp4 

J 在 After Effects 中 新 建 一 个 空白 的 项 目 ， 执 行 “ 文 件 ” >“ 导 入 ”> “ 文 
件 ” 命 令 ， 在 弹出 的 “导入 文件 ”对 话 框 中 选择 “ 源 文件 \ 第 3 章 \ 素 材 \37201. 
psd”， 如 图 3-117 所 示 。 弹 出 设置 对 话 框 ， 设 置 如 图 3-118 所 示 。 
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图 3-117 图 3-118 


有 单 击 “ 确 定 ” 按 钮 ， 导 入 PSD 素材 自动 生成 合成 ， 如 图 3-119 所 示 。 执行 “文件 ”>“" 导 
入 ”> "文件 " 命令 , 在 弹出 的 “导入 文件 ”对 话 框 中 选择 多 个 需要 导入 的 素材 图 像 , 如 图 3-120 所 示 。 


图 3-119 


天 单 击 “导入 " 按钮 , 将 选中 的 多 个 素材 同时 导入 “项 目 " 面板 中 , 如 图 3-121 所 示 。 双击 “项 
目 ”面板 中 自动 生成 的 合成 ， 在 “合成 ”窗口 中 打开 该 合成 ， 如 图 3-122 所 示 。 
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图 3-121 图 3-122 


0》 在 “时 间 轴 ”面板 中 可 以 看 到 该 合成 中 相应 的 图 层 ， 如 图 3-123 所 示 。 将 除 “背景 ”图 层 
以 外 的 其 他 图 层 锁定 , 选择 "背景" 图 层 , 按 快捷 键 P, 显示 该 图 层 的 “位 置 ”属性 , 如 图 3-124 所 示 。 


图 3-123 图 3-124 
有 BB 将 “时 间 指 示 器 ” 移 至 2 秒 位 置 , 单 击 "位 置 ”属性 前 的 “秒表 ”图 李 图 , 插入 该 属性 关键 帧 ， 
如 图 3-125 所 示 。 将 “时 间 指 示 器 ” 移 至 3 秒 位 置 ， 在 “合成 ”窗口 中 将 该 图 层 中 的 图 像 向 左 移 
合适 的 位 置 ， 如 图 3-126 所 示 。 


当前 时 间 时 间 指 示 器 


图 3-125 


d= 天 


在 “时 间 轴 ”面板 中 可 以 直接 拖 动 “ 时 间 指示 器 ”， 从 而 调整 时 间 的 位 置 ,但 这 种 方法 很 难 精确 调整 时 间 位 置 
如 果 需 要 精确 调整 时 间 位 置 , 可 以 通过 “时 间 轴 ”面板 上 的 “当前 时 间 ” 选 项 或 者 “合成 " 窗口 中 的 “预览 时 间 ” 选 项， 
输入 精确 的 时 间 ， 即 可 在 “时 间 轴 ” 面 板 中 跳 转 到 所 和 输入 的 时 间 位 置 | 

OB 在 “时 间 轴 ”面板 上 3 秒 位 置 自动 插入 “位 置 ”属性 关键 帧 ， 如 图 3-127 所 示 。 将 “时 间 
指示 器 ” 移 至 2 秒 位 置 ， 在 “项 目 ”面板 中 将 37202jpg 素材 拖 入 “时 间 轴 ”面板 中 “背景 ”图 层 上 
方 ， 在 “合成 ”窗口 中 将 该 素材 调整 至 合适 的 位 置 ， 如 图 3-128 所 示 。 


| 
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有 0 选择 37202.jpg 


妈 层 ， 按 快捷 键 P， 显 示 该 医 


图 3-128 


蜀 标 ， 插 入 该 属性 关键 帧 ， 如 图 3-129 所 示 。 将 “时 
将 该 图 层 中 的 图 像 向 左 移 至 合适 的 位 置 ， 如 医 


层 的 “位 置 ”属性 ， 单 击 该 属性 前 的 “秒表 ” 
间 指 示 器 ” 移 至 3 秒 位 置 ， 在 “合成 ”窗口 中 


3-130 所 示 。 


三 将 “时 间 指 示 器 ” 移 至 5 秒 位 置 , 在 “时 间 轴 ” 
按 旬 图 ， 在 该 时 间 位 置 添加 “位 置 ”属性 关键 帧 ， 如 医 


图 3-129 


图 3-130 


面板 上 单 击 “位置 ” 属 性 前 的 “添加 关键 帧 " 


3-131 所 示 。 将“ 时间 指 示 器 ” 移 至 6 秒 位 置 ， 


在 “合成 ”窗口 中 将 该 图 层 中 的 图 像 向 左 移 至 合适 的 位 置 ， 如 图 3-132 所 示 。 


2 在 6 秒 位 置 


位 置 ， 
窗口 + 


磺 


图 3-131 


图 3-132 


动 插入 “位 置 ”属性 关键 帧 ， 如 医 3-133 所 示 。 将 “时 间 指示 器 ” 移 至 5 秒 


在 “项 目 ” 面 板 中 将 37203.jpg 素材 拖 入 “时 间 轴 ”面板 中 36202.jpg 图 层 上 方 ， 在 “合成 ” 


将 该 素材 调整 至 合适 的 位 置 ， 如 恬 


3-134 所 示 。 
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扫 3-133 图 3-134 

了》 选择 37203.jpg 图 层 ， 按 快捷 键 P， 显 示 该 图 层 的 “位 置 ” 属 性 ， 单 击 该 属性 前 的 “秒表 ” 
图标 ， 插 入 该 属性 关键 帧 ， 如 图 3-135 所 示 。 将 “时 间 指 示 器 ” 移 至 6 秒 位 置 ， 在 “合成 ”窗口 中 
将 该 图 层 中 的 图 像 向 左 移 至 合适 的 位 置 ， 如 图 3-136 所 示 。 


图 3-135 图 3-136 

于) 将 “时 间 指 示 器 ” 移 至 8 秒 位 置 ， 在“ 时间 轴 ”面板 上 单 击 “ 位 置 ” 属 性 前 的 “添加 关键 帧 
按钮 圈 ， 在 该 时 间 位 置 添加 “位 置 ”属性 关键 帧 ,如 图 3-137 所 示 。 将 “时 间 指 示 器 ” 移 至 9 秒 位 置 ， 
在 “合成 ”窗口 中 将 该 图 层 中 的 图 像 向 左 移 至 合适 的 位 置 ， 如 图 3-138 所 示 。 


图 3-137 图 3-138 


.到 将“ 时间 指示 器 ” 移 至 8 秒 位 置 , 在“ 项目” 面板 中 将 “37201 个 图 层 ” 文 件 夹 中 的 “背景 ” 
素材 拖 入 “时 间 轴 ”面板 中 37203.jpg 图 层 上 方 ， 在 “合成 ”窗口 中 将 该 素材 调整 至 合适 的 位 置 ， 如 
妈 3-139 所 示 。 选 择 “ 背 景 /37201.psd” 图 层 ， 按 快捷 键 P， 显 示 该 图 层 的 “位 置 ” 属 性 ， 单 击 “ 位 
置 ” 属 性 前 的 “秒表 ”图 标 ， 插 入 该 属性 关键 帧 ， 如 图 3-140 所 示 。 


四 区 I 


图 3-139 图 3-140 


下 ) 将 “时 间 指 示 器 ” 移 至 9 秒 位 置 , 在 “合成 ”窗口 中 将 该 图 层 中 的 图 像 向 左 移 至 合适 的 位 置 ， 


如 图 3-141 所 示 。 在 “项 目 ” 面 板 上 的 37201 合成 上 右 击 ， 在 弹出 的 菜单 中 选择 “合成 设置 ”命令 ， 
在 弹出 的 对 话 框 中 设置 “持续 时 间 ” 为 9 秒 ， 如 图 3-142 所 示 。 


图 3-141 图 3-142 


在 动画 的 最 后 制作 第 一 张 
放 完 9 秒 时 就 会 跳 转 到 0 秒 位 置 旨 


到 片 从 右 侧 位 移入 场 的 动画 效果 ， 因 为 时 间 轴 动画 默认 是 循环 播放 的 ， 这 样 当 播 
lb 续 播放 ， 从 而 使 动画 形成 一 个 连贯 的 循环 


征 ) 单 击 “确定 ”按钮 ， 完 成 “合成 设置 ”对 话 框 的 设置 。 在 “时 间 轴 ”面板 中 可 以 看 到 为 相 
应 图 层 制作 的 位 置 移动 动画 的 关键 帧 效果 ， 如 图 3-143 所 示 。 


图 3-143 


.到 完成 该 背景 图 片 切换 动 效 的 制作 ， 执 行 “ 文 件 ”> “保存 ” 命 令 ， 将 文件 保存 为 “ 源 文 件 \ 
第 3 章 \3-7-2.aep”。 单 击 “预览 ”面板 上 的 “播放 /停止 ”按钮 圈 ， 可 以 在 “合成 ”窗口 中 预览 
动画 效果 ， 如 图 3-144 所 示 。 
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图 3-144 


区 和 下 缩放 P 


“缩放 " 属性 可 以 设置 素材 的 尺寸 大 小 , 通过 该 属性 结合 关键 帧 可 以 制作 出 素材 缩放 的 动画 效果 。 

选择 相应 的 图 层 ， 按 快捷 键 S， 可 以 在 该 图 层 下 方 显示 出 “缩放 ”属性 ， 素 材 的 缩放 同样 是 以 
划 点 的 位 置 为 基准 ， 可 以 直接 通过 修改 “缩放 ”属性 中 的 参数 修改 素材 的 尺寸 大 小 ， 如 图 3-145 所 
示 。 也 可 以 在 “合成 ”窗口 中 直接 使 用 “选择 工具 ” 拖 动 素材 四 周 的 控制 点 来 调整 素材 的 尺寸 大 小 ， 
如 图 3-146 所 示 。 


图 3-145 图 3-146 


提示 4 
使 用 “选择 工具 ”在 “合成 ”窗口 中 通过 拖 动 控制 点 的 方法 对 素材 进行 缩放 操作 时 ， 按 住 Shift 键 拖 动 素材 4 个 
角 点 位 置 ， 可 以 对 素材 进行 等 比例 缩放 操作 


“旋转 ”属性 用 来 设置 素材 的 旋转 角度 ， 通 过 该 属性 结合 关键 帧 可 以 制作 出 素材 旋转 的 动画 
效果 。 

选择 相应 的 图 层 , 按 快捷 键 R, 可 以 直接 在 该 图 层 下 方 显示 出 "旋转 "属性 ,如 图 3-147 所 示 。 
素材 的 旋转 同样 以 锚 点 的 位 置 为 基准 ， 可 以 直接 修改 “旋转 ”属性 中 的 参数 ， 也 可 以 在 “合成 ” 
窗口 中 选中 需要 旋转 的 素材 ， 使 用 “旋转 工具 ”在 素材 上 拖 动 鼠标 进行 旋转 操作 ， 如 图 3-148 
所 示 。 


图 3-147 图 3-148 


性 包含 两 个 参数 ,第 1 个 参数 用 于 设置 对 象 旋转 的 圈 数 ,如 果 设 置 为 正 值 ， 
例如 1x 表示 顺 时 针 旋 转 1 圈 ; 如 果 设 置 为 负 值 ， 则 表示 逆 时 针 旋 转 指定 的 圈 数 ;第 2 个 
取 值 范围 在 0? ~ 360? 或 -360? ~ 0? 之 间 


C2 不 光度 
“不 透明 度 ” 属 性 用 来 设置 图 层 的 不 透明 度 ， 当 不 透明 度 值 为 0% 时 ， 图 层 中 的 对 象 完全 透明 ; 
当 不 透明 度 值 为 100% 时 ， 图 层 中 的 对 象 完全 不 透明 。 通 过 该 属性 结合 关键 帧 可 以 制作 出 素材 淡 入 
淡出 的 动画 效果 。 
选择 相应 的 图 层 , 按 快捷 键 T, 可 以 直接 在 该 图 层 下 方 显 示 出 “不 透明 度 " 属性 , 如 图 3-149 所 示 。 
修改 “不 透明 度 ” 参 数 即 可 调整 该 图 层 的 不 透明 度 ， 效 果 如 图 3-150 所 示 。 


东 顺 时 针 旋 转 指定 的 圈 数 ， 
用 于 设置 旋转 的 角度 ， 
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图 3-149 


如 果 只 是 选择 “时 间 轴 ”面板 ， 而 没有 选择 具体 的 某 个 或 某 几 个 图 层 ， 按 快捷 键 A、P、S、R、T， 可 以 在 所 有 
图 层 的 下 方 显示 出 相应 的 属性 。 也 可 以 在 “时 间 轴 ”面板 中 同时 选中 多 个 图 层 ， 按 快捷 键 A、P、S、R、T， 可 以 在 
所 选择 的 多 个 图 层 下 方 显示 出 相应 的 属性 。 


实例 05 一 一 制作 元 素 入 场 动 效 人 
源 文件 ， 源 文件 \ 第 3 章 \3-7-5.aep 视频 视频 \ 第 3 章 \3-7-5.mp4 
观 在 After Effects 中 新 建 一 个 空白 的 项 目 , 执行 "文件 " > "导入 " > ' 文 “请 店 

件 ”命令 ， 在 弹出 的 “导入 文件 ”对 话 框 中 选择 “ 源 文件 \ 第 3 章 \ 素 材 \、 回 芷 时 


fF 
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37501.psd”， 如 图 3-151 所 示 。 弹 出 设置 对 话 框 ， 如 图 3-152 所 示 。 


图 3-151 图 3-152 


人 喇 单 击 “ 确 定 ” 按 钮 导入 PSD 素材 自动 生成 合成 ， 如 图 3-153 所 示 。 双 击 “ 项 目 ” 面 板 中 
自动 生成 的 合成 ， 在 “合成 ”窗口 中 打开 该 合成 ， 如 图 3-154 所 示 。 


图 3-153 图 3-154 


有 在 “时 间 轴 ”面板 中 可 以 看 到 该 合成 中 相应 的 图 层 ， 如 图 3-155 所 示 。 将 “背景 "图 层 锁定 ， 
选择 “卡通 形象 ”图 层 ， 展 开 该 图 层 的 “变换 ”属性 ， 如 图 3-156 所 示 。 


图 3-155 图 3-156 

有 确认“ 时间 指示 器 ”位 于 0 秒 位 置 ， 在 “时 间 轴 ”面板 中 分 别 单 击 “ 缩 放 ”“ 旋 转 ” 和 “不 
透明 度 ” 这 3 个 属性 前 的 “ 辐 标 国 ， 为 这 3 个 属性 插入 关键 帧 ， 如 图 3-157 所 示 。 设 置 “ 缩 
放 ” 属 性 为 0% ，“ 不 透明 度 ” 属 性 为 0%， 在 “合成 ”窗口 中 可 以 看 到 该 图 层 中 对 象 的 效果 ， 如 
妈 3-158 Dns 
“时 间 指 示 器 ” 移 至 2 秒 位 置 ， 在 “时 间 轴 ”面板 中 设置 “缩放 ”属性 为 100%，“ 旋 转 ” 
属性 为 顺 “不 透明 度 ” 属性 为 100%, 自动 添加 这 3 个 属性 关键 帧 , 如 图 3-159 所 示 。 在 “ 合 
成 ”窗口 中 可 以 看 到 该 到 层 中 对 象 的 效果 ， 如 图 3-160 所 示 。 
J 将 “时 间 指 示 器 ” 移 至 0 秒 位 置 ， 选 择 “ 按 钮 ”图 层 ， 展 开 该 图 层 的 “变换 ”属性 ， 如 医 


二 


图 After Effects CC 移动 网 站 U1 交互 动 效 设计 全 程 操 秘 RSSSSSESnRSRSRSRSRSRSRSRSRSRSRSRSRERERERERERE 


3-161 所 示 。 单 击 “ 缩 放 ” 和 “不 透明 度 ” 属 性 前 的 “秒表 ” 


到 3-162 所 示 。 


到 标 国 ， 为 这 两 个 属性 插入 关键 帧 ， 如 


图 3-157 


图 3-159 


图 3-158 


图 3-161 


图 3-162 


有 WD 设置 "缩放 "和 “不 透明 度 " 属性 的 值 为 0%, 在 “合成 " 窗口 中 可 以 看 到 该 医 


层 中 对 象 的 效果 ， 


如 图 3-163 所 示 。 将 “时 间 指 示 器 ” 移 至 2 秒 位 置 ， 分 别 单 击 “ 位 置 ” 和 “不 透明 度 ” 属 性 前 的 “ 添 


3-164 所 示 。 


加 关键 帧 ”按钮 图 ， 在 该 时 间 位 置 为 这 两 个 属性 添加 关键 帧 ， 如 医 


RNRGRGRGRGRGRR 和 人 药 3 章 人 fr 


er Effects 软件 基础 操作 


“不 透明 度 ” 属 性 值 为 


J 将 “时 间 指示 器 ” 移 至 3 秒 位 置 ， 设置 “缩放 ”属性 值 为 120%， 


100%， 如 图 3-165 所 示 。 在 “合成 ”窗口 中 可 以 看 到 该 医 


图 3-165 图 


J 将“ 时间 指示 器 " 移 至 3 秒 5 帧 位 置 , 设置 “缩放 ”属性 值 为 90%, 如 
成 ”窗口 中 可 以 看 到 该 图 层 中 对 象 的 效果 ， 如 图 3-168 所 示 。 


图 3-167 


4 3-168 
好) 将 “时 间 指示 器 " 移 至 3 秒 8 帧 位 置 , 设置 “缩放” 属性 值 为 110%, 如 医 


中 对 象 的 效果 ， 如 图 3-166 所 示 。 


3-166 
图 3-167 所 示 。 在 “ 合 


3-169 所 示 。 将 "时 


间 指 示 器 ” 移 至 3 秒 10 帧 位 置 ， 设 置 “ 缩 放 ” 属 性 值 为 100% ， 如 图 3-170 所 示 。 


图 3-169 


图 3-170 


After Effects CC 移动 网 站 UI 交互 动 效 设计 全 程 揭 秘 


于 在 “项 目 ” 面板 上 的 37501 合成 上 右 击 ， 在 弹出 的 菜单 中 选择 “合成 设置 ”命令 ， 在 弹出 
的 对 话 框 中 设置 “持续 时 间 ” 为 5 秒 ， 如 图 3-171 所 示 。 单 击 “ 确 定 ”按钮 ， 完 成 “合成 设置 ”对 


话 框 的 设置 。 在 “时 间 机 板 中 可 以 看 到 相应 图 层 中 的 关键 帧 动画 ， 如 图 3-172 所 示 。 


图 3-171 图 3-172 


落 完成 元 素 入 场 动 效 的 制作 ， 执 行 “ 文 件 ”> “保存 ”命令 ， 将 文件 保存 为 “ 源 文件 \ 第 3 章 \ 
3-7-5.aep”。 单 击 “ 预 览 ” 面 板 上 的 “播放 /停止 ” 按 包 国 ， 可 以 在 “合成 ”窗口 中 预览 动画 效果 ， 
如 图 3-173 所 示 。 


全 由 全 册 =" 
人 DR 


Po 


图 3-173 


[&y 


明理 名 在 After Effects ee Dp 


。 在 Se 让 
， 在 After Effects 中 完 画 的 制作 后 ， 
， 但 若 将 其 与 Photoshop 相 结 


关键 帧 与 图 表 编 辑 器 D 


使 用 After Effects 制作 交互 动 效 的 过 程 中 ， 首 先 需 要 制作 能 够 表现 出 主要 意图 的 关键 动作 ， 这 


些 关键 动作 所 在 的 帧 就 叫 作 动画 关键 帧 ， 理 解 和 正确 操作 关键 帧 是 使 用 After Effects 制作 交互 动 效 的 
关键 。 


5 帧 与 关键 帧 


关键 帧 的 概念 来 源 于 传统 的 动画 片 制作 。 人 们 看 到 的 视频 画面 ， 其 实 是 一 幅 幅 图 像 快 速 播放 而 
产生 的 视觉 错觉 , 在 早期 的 动画 制作 中 , 这 些 图 像 中 的 每 一 张 都 需要 动画 师 绘制 出 来 , 如 图 4-1 所 示 。 


SIA 


下 信贷 有 贷 贰 导 夺 
nen 


图 4-1 
所 谓 关键 帧 动画 ， 就 是 给 需要 动画 效果 的 属性 准备 一 组 与 时 间 相 关 的 值 ， 这 些 值 都 是 在 动画 序 
列 中 比较 关键 的 帧 中 提取 出 来 的 ， 而 其 他 时 间 帧 中 的 值 ， 可 以 使 用 这 些 关 键 值 ， 采 用 特定 的 插值 方 
式 计 算得 到 ， 从 而 获得 比较 流畅 的 动画 效果 。 
动画 是 基于 时 间 的 变化 ， 如 果 图 层 的 某 个 属性 在 不 同时 间 产 生 不 同 的 参数 变化 ， 并 且 被 正确 地 
记录 下 来 ， 那 么 可 以 称 这 个 动画 为 “关键 帧 动画 ”。 
关键 帧 是 组 成 动画 的 基本 元 素 ， 关 键 帧 的 应 用 是 制作 动画 的 基础 和 关键 。 在 After Effects 的 关 
键 帧 动画 中 ， 至 少 要 通过 两 个 关键 帧 才能 产生 作用 ， 第 1 个 关键 帧 表示 动画 的 初始 状态 ， 第 2 个 关 
键 帧 表示 动画 的 结束 状态 ， 而 中 间 的 动态 则 由 计算 机 通过 插值 计算 得 出 。 例 如 ， 可 以 在 0 秒 的 位 置 


设置 图 层 的 “不 透明 度 ” 属 性 为 0% ， 然 后 在 1 秒 的 位 置 设置 该 图 层 的 “不 透明 度 ”属性 为 100%， 

如 果 这 个 变化 被 正确 地 记录 下 来 ， 那 么 图 层 就 产生 了 “不 透明 度 ” 属 性 在 0 ~ 1 秒 从 0% ~ 100% 的 

变化 。 
一 个 关键 帧 会 包括 以 下 信息 内 容 。 

加 ”属性 : 指 的 是 图 层 中 的 哪个 属性 发 生变 化 。 

加 时间: 指 的 是 在 哪个 时 间 点 确定 的 关键 帧 。 

加 ”参数 值 : 指 的 是 当前 时 间 点 参数 的 数值 是 多 少 。 

© 

© 


关键 帧 类 型 : 关键 帧 之 问 是 线性 还 是 曲线 。 
关键 帧 速率 :关键 帧 之 问 是 什么 样 的 变化 速率 。 


相 证 杞 创建 关键 帧 加 


在 After Effects 中 ， 基 本 上 每 一 个 特效 或 属性 都 有 一 个 对 应 的 “时 间 变 化 秒表 ” 按 包 图， 可 以 通 
过 单 击 属性 名 称 左 侧 的 “秒表 ”按钮 图 ， 来 激活 关键 帧 功能 。 

在 “时 间 轴 ”面板 中 选择 需要 添加 关键 帧 的 图 层 ， 展 开 该 图 层 的 属性 列表 ， 如 图 4-2 所 示 。 如 
果 需 要 为 某 个 属性 添加 关键 巾 ， 只 需要 单 击 该 属性 前 的 “秒表 ” 按 包 图， 即 可 激活 关键 帧 功能 ， 并 在 


当前 时 间 位 置 插入 一 个 该 属性 关键 帧 ， 如 图 4-3 所 示 。 


图 4-2 图 4-3 

当 激 活该 属性 的 关键 帧 后 , 在 该 属性 的 最 左 侧 会 出 现 3 个 按钮 , 分 别 是 " 转 到 上 一 个 关键 帧 " 图 “ 添 

加 或 移 除 关键 帧 ” 蔷 和 “ 转 到 下 一 个 关键 帧 ” 图。 在 “时 间 轴 ”面板 中 将 “时 间 指 示 器 ” 移 至 需要 添 

加 下 一 个 关键 帧 的 位 置 ， 单 击 “ 添 加 或 移 除 关键 帧 ” 按 馈 轿 ， 即 可 在 当前 时 间 位 置 插入 该 属性 第 2 个 
关键 帧 ， 如 图 4-4 所 示 。 

如 果 再 次 单 击 该 属性 名 称 前 的 “秒表 ”按钮 图 ， 可 以 取消 该 属性 关键 帧 的 激活 状态 ， 该 属性 所 

添加 的 所 有 关键 帧 也 会 被 同时 删除 ， 如 图 4-5 所 示 。 


为 某 个 属性 在 不 同 的 时 间 位 置 插入 关键 帧 后 ， 可 以 在 属性 名 称 的 右 侧 修改 所 添加 关键 帧 位 置 的 属性 参数 值 ， 不 


同 的 关键 帧 设置 不 同 的 属性 参数 值 后 ， 就 能 够 形成 关键 帧 之 间 的 动画 过 渡 效 果 。 


在 使 用 After Effects 制作 动 效 的 过 程 中 ， 通 常 需要 对 关键 帧 进行 一 系列 的 编辑 操作 ， 本 小 节 将 


详细 介绍 关键 帧 的 选择 、 移 动 、 复 制 和 删除 操作 的 方法 和 技巧 。 


了 1. 选择 关键 帧 。 


在 创建 关键 帧 后 ， 有 时 还 需要 对 关键 帧 进行 修改 和 设置 操作 , 这 时 就 需要 选中 要 编辑 的 关键 帧 。 
选择 关键 帧 的 方式 有 多 种 ， 下 面 分 别 进行 介绍 。 

(1) 在 “时 间 轴 ”面板 中 直接 单 击 某 个 关键 帧 图 标 ， 被 选中 的 关键 帧 显示 为 蓝 色 ， 表 示 已 经 选中 
关键 帧 ， 如 图 4-6 所 示 。 

(2) 在 “时 间 轴 ”面板 中 的 空白 位 置 单 击 并 拖 动 出 一 个 矩形 框 ， 在 矩形 框 内 的 多 个 关键 帧 都 将 被 
同时 选中 ， 如 图 4-7 所 示 。 


(3) 对 于 存在 关键 帧 的 某 个 属性 ， 单 击 该 属性 名 称 ， 即 可 将 该 属性 的 所 有 关键 帧 全 部 选中 ， 如 医 
4-8 所 示 。 


图 4-6 图 4-7 图 4-8 
{49 配合 Shift 键 可 以 同时 选择 多 个 关键 帧 ， 即 按 住 Shift 键 不 放 ， 在 多 个 关键 帧 上 单 击 ， 可 以 后 
时 选择 多 个 关键 帧 。 而 对 于 已 选择 的 关键 帧 ， 按 住 Shift 键 不 放 再 次 单 击 ， 则 可 以 取消 选择 。 


在 After Effects 中 ， 为 了 更 好 地 控制 动画 效果 ， 关 键 帧 的 位 置 是 可 以 随意 移动 的 ， 可 以 单独 移 
动 一 个 关键 帧 ， 也 可 以 同时 移动 多 个 关键 帧 。 

如 果 想 要 移动 单个 关键 帧 , 可 以 选中 需要 移动 的 关键 帧 , 按 住 鼠标 左 键 拖 动 关键 帧 到 需要 的 位 置 ， 
这 样 就 可 以 移动 关键 帧 ， 如 图 4-9 所 示 。 


入 


0:00:03:00 。 100% 0:00:06:00 。 100% 


如 果 想 要 移动 多 个 关键 帧 ， 可 以 按 住 Shift 键 ， 单 击 鼠 标 选中 需要 移动 的 多 个 关键 帧 ， 然 后 将 其 拖 动 至 目标 位 置 
即 可 。 


3. 复制 关键 帧 2 


在 After Effects 中 进行 合成 制作 时 ， 经 常 需要 重复 设置 参数 ， 因 此 需要 对 关键 帧 进行 复制 粘贴 
的 操作 ， 这 样 可 以 大 大 提高 创作 效率 ， 避 免 一 些 重复 性 的 操作 。 
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如 果 想 要 进行 关键 帧 的 复制 操作 ， 首 先 需要 在 “时 间 轴 ”面板 中 选中 1 个 或 多 个 需要 复制 的 关 
键 帧 ， 如 图 4-10 所 示 。 执 行 “编辑 ”> “复制 ”命令 ， 即 可 复制 所 选中 的 关键 帧 ， 将 “时 间 指 示 器 ” 
移 至 需要 粘贴 关键 帧 的 位 置 ， 执 行 “ 编 辑 ”> “粘贴 ”命令 ， 即 可 将 所 复制 的 关键 帧 粘贴 到 当前 时 间 
为 开始 的 位 置 ， 如 图 4-11 所 示 。 


品 


图 4-10 图 4-11 
当然 也 可 以 将 复制 的 关键 帧 粘贴 到 其 他 的 图 层 中 ， 例 如 选中 “时 间 轴 ”面板 中 需要 粘贴 关键 帧 
的 图 层 ， 展 开 该 图 层 属性 ， 将 “时 间 指 示 器 ” 移 至 需要 粘贴 关键 的 位 置 ， 执行 “编辑 ”> “粘贴 ” 
命令 ， 即 可 将 所 复制 的 关键 帧 粘贴 到 当前 所 选择 的 图 层 中 ， 如 图 4-12 所 示 。 


0:00:04:00 


~ 图 
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图 4-12 


如 果 复 制 相同 属性 的 关键 帧 ， 只 需要 选择 目标 图 层 就 可 以 粘贴 关键 帧 ; 如 果 复 制 的 是 不 同属 性 的 关键 帧 ， 需 要 
选择 目标 图 层 的 目标 属性 才能 够 粘贴 关键 帧 。 需 要 的 是 ， 如 果 粘 贴 的 关键 帧 与 目标 图 层 上 的 关键 帧 在 同一 
时 间 位 置 ， 将 会 覆盖 目标 图 层 上 的 关键 帧 


和 4. 删除 关键 帧 


在 制作 动画 的 过 程 中 , 有 时 需要 将 多 余 的 或 不 需要 的 关键 帧 进行 删除 , 删除 关键 帧 的 方法 很 简单 
选中 需要 删除 的 单个 或 多 个 关键 帧 ， 执 行 “ 编 辑 ”> “清除 ”命令 ， 即 可 将 选中 的 关键 帧 删除 。 

也 可 以 选中 多 余 的 关键 帧 , 直接 按键 盘 上 的 Delete 键 , 即 可 将 所 选中 的 关键 帧 删除 。 还 可 以 在 "时 
间 轴 ”面板 中 将 “时 间 指 示 器 ” 移 至 需要 删除 的 关键 帧 位 置 ， 单 击 该 属性 左 侧 的 “添加 或 移 除 关键 帧 ” 
按 铝 图， 即 可 将 当前 时 间 的 关键 帧 删除 ， 这 种 方法 一 次 只 能 删除 一 个 关键 帧 。 


实例 06 一 制作 趣味 托 形 拼图 动 效 刀 ”人 


源 文件 ， 源 文件 \ 第 4 章 M-1-3.aep 视频 : 视频 \ 第 4 章 M-1-3.mp4 

了 WD 在 After Effects 中 新 建 一 个 空白 的 项 目 , 执行 “合成 ” >“ 新建 合成 ”命令 ， 
弹出 “合成 设置 " 对 话 框 , 对 相关 选项 进行 设置 , 如 图 4-13 所 示 , 单 击 “确定 ” 按钮 ， 
新 建 合成 。 使 用 “和 矩 形 工具 ”, 在 工具 栏 中 设置 “填充 ”为 折 FFF00，“ 描 边 ” 为 无 ， 如 图 4-14 所 示 。 


氏 ， 


时， 可 以 在 工具 栏 中 设 
”或 “ 描 边 ”文字 ， 可 以 弹 : 


使 用 工 上 
形状 图 形 的 “填充 
| 或 “ 描 边 选项 ”对 话 框 ， 


工具 或 者 “钢笔 工 
“ 描 边 颜色 ”和 “ 撒 i 
在 其 中 可 以 设置 填充 或 描 边 的 类 型 、 


了 在 “合成 ”窗口 中 按 住 Shift 键 拖 动 鼠 标 ， 绘 制 一 个 正方 形 ， 如 图 4-15 所 示 。 在 “时 间 轴 ” 
面板 中 展开 该 形状 图 层 下 方 的 “矩形 1” 选 项 下 的 “和 矩形 路 径 ” 选 项 ， 设 置 “ 大 小 ”属性 为 50， 如 
妈 4-16 所 示 。 


图 4-15 图 4-16 


了 使 用 “向 后 平移 ( 锚 点 ) 工具 ”， 调 整 该 矩形 的 锚 点 位 于 中 心 位 置 ， 如 图 4-17 所 示 。 打 开 
“对 齐 ” 面 板 ， 分 别 单 击 “ 水 平 居中 ”和 “垂直 居中 ”按钮 ， 如 图 4-18 所 示 ， 使 矩形 与 “合成 ” 窗 


口 的 中 心 位 置 对 齐 。 


图 4-17 图 4-18 

到 展开 该 形状 图 层 下方 的 “ 珑 形 1” 选 项 下 的 “矩形 路 径 ” 选 项 ， 设 置 “ 圆 度 ” 属 性 为 3， 
使 该 矩形 的 角 变 成 圆 角 , 效果 如 图 4-19 所 示 。 选择 “内容” 选项 下 的 "和 矩形 1" 选项 , 执行 “编辑 ”> "条 
复 ” 命 令 ， 或 按 快捷 键 Ctt+D， 将 其 原 位 复制 得 到 “矩形 2” 选 项 ， 如 图 4-20 所 示 。 
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几 


国 Eee 


图 4-19 图 4-20 
“和 矩形 2” 选 项 下 方 的 “变换 : 矩形 2” 选项 ， 设 置 “ 位 置 ”属性 为 (60.0,0.0)， 效 果 
如 图 4-21 所 示 。 选择 “矩形 2” 选项 , 按 快捷 键 Ctri+D，, 将 其 原 位 复制 得 到 “和 矩形 3” 选 项 , 展开 “ 甜 
形 3” 选项 下 方 的 “变换 : 和 矩形 3” 选 项 ， 设置“ 位置” 属性 为 (-60.0,0.0)， 效 果 如 图 4-22 所 示 。 


图 4-21 图 4-22 
和 使 用 相同 的 制作 方法 ， 将 矩形 复制 多 次 并 分 别 设置 复制 得 到 的 矩形 的 “位 置 ”属性 ， 从 而 
制作 出 九宫 格 样 的 效果 ， 如 图 4-23 所 示 。 在 “合成 ”窗口 中 选择 不 需要 的 和 矩形 ， 将 其 删除 ， 如 医 
4-24 所 示 。 


图 4-23 


i 形 都 位 于 同一 个 形状 图 层 中 ， 所 以 当 使 用 “选取 工具 ”在 “合成 ”窗口 中 单 击 只 能 够 选中 整个 形 # 
1 某 个 矩形 ， 可 以 在 该 矩形 上 双击 ， 即 可 选中 该 形状 图 层 3 中 的 革 人 ` 和 抵 形 。 或 者 在 “时 间 轴 ” 面板 中 的 该 
方 的 “内 容 ” 选 项 中 单 击 选择 需要 删除 的 矩形 选项 ， 再 按 Delete 键 将 其 删除 


“形状 图 层 1” 下 方 的 “变换 ”选项 ， 设 置 “ 旋 转 ”属性 为 45"， 效 果 如 图 4-25 所 示 。 
图 层 1”， 执 行 “ 效 果 ”> “生成 ”> “梯度 渐变 ”命令 ， 为 其 应 用 “梯度 渐变 ”效果 ， 
在 打开 的 “效果 控件 ”面板 中 对 相关 选项 进行 设置 ， 效 果 如 图 4-26 所 示 。 


图 4-25 图 4-26 


码 展开 “形状 图 层 1” 下 方 的 “内 容 ” 选 项 ， 为 每 一 个 矩形 选项 下 方 的 “变换 ”选项 中 的 “位 
置 ” 属 性 插入 关键 帧 ， 如 图 4-27 所 示 。 选 中 该 图 层 ， 按 快捷 键 U， 在 该 图 层 下 方 只 显示 添加 了 关键 
帧 的 属性 ， 如 图 4-28 所 示 。 


图 4-27 图 4-28 


症 将 “时 间 指 示 器 ” 移 至 0 秒 10 帧 的 位 置 ， 在 “时 间 轴 ”面板 中 修改 “变换 : 矩形 9” 选 项 
下 方 的 “位 置 ”属性 为 0.0,0.0)， 在 当前 时 间 位 置 自动 添加 该 属性 关键 帧 ， 如 图 4-29 所 示 。“ 合 成” 
窗口 效果 如 图 4-30 所 示 。 


图 4-29 图 4-30 


了 珊 选择 “变换 ,矩形 7” 选 项， 修改 该 选项 下 方 的 “位 置 ”属性 为 (0.0,-60.0)， 在 当前 时 间 位 


置 自 动 添加 该 属性 关键 帧 ， 如 图 4-31 所 示 。“ 合 成 ”窗口 效果 如 图 4-32 所 示 。 
加 选 择 “ 变 换 : 矩形 2” 选 项， 修改 该 选项 下 方 的 “位 置 ” 属 性 为 (60.0,-60.0)， 在 当前 时 间 

位 置 自动 添加 该 属性 关键 帧 ， 如 图 4-33 所 示 。“ 合 成 ”窗口 效果 如 图 4-34 所 示 。 

也 在 "时 间 轴 "面板 中 拖 动 鼠 标 同时 选中 "变换 和 矩形 7" 选项 中 的 两 个 关键 帧 , 如 图 4-35 所 示 。 

将 其 向 右 拖 动 ， 移 至 从 第 9 帧 开始 ， 如 图 4-36 所 示 。 
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图 4-31 


图 4-33 


图 4-35 图 4-36 
栈 使 用 相同 的 制作 方法 ， 将 “变换 矩形 2” 选 项 中 的 两 个 关键 帧 拖 动 至 从 第 18 帧 开始 ， 如 
妈 4-37 所 示 。 将 “时 间 指 示 器 ” 移 至 1 秒 02 帧 的 位 置 ， 选 择 “ 变 换 : 矩形 9” 选项 ， 单 击 该 选项 
下 方 “ 位 置 ”属性 左 侧 的 “添加 或 移 除 关键 帧 ”按钮 , 在 当前 位 置 添加 该 属性 关键 帧 , 如 图 4-38 所 示 。 


图 4-37 图 4-38 
加 将 “时 间 指示 器 ” 移 至 1 秒 12 帧 的 位 置 ， 修 改 “ 变 换 ， 矩形 9” 选 项 下 方 的 “位 置 ” 属 


性 为 (60.0,0.0)， 在 当前 时 间 位 置 自动 添加 该 属性 关键 帧 ， 如 图 4-39 所 示 。“ 合 成 ”窗口 效果 如 
妈 4-40 所 示 。 


图 4-39 图 4-40 
本 接 下 来 制作 左 侧 3 个 矩形 的 运动 动画 。 在 “时 间 轴 ”面板 中 选择 “变换 ， 和 矩形 3” 选 项 ， 
将 该 选项 下 方 的 “位 置 ”属性 关键 帧 向 右 移 至 1 秒 11 帧 的 位 置 。 将 “时 间 指 示 器 ” 移 至 1 秒 21 帧 
的 位 置 ， 修 改 “ 变 换 : 矩形 3” 选 项 下 方 的 “位 置 ”属性 为 (0.0,0.0)， 在 当前 时 间 位 置 自动 添加 该 属 
性 关键 帧 ， 如 图 4-41 所 示 。 “合成 ”窗口 效果 如 图 4-42 所 示 。 


图 4-41 图 4-42 
了 8 选择 “变换 ， 和 矩形 4” 选 项 ， 将 该 选项 下 方 的 “位 置 ” 属 性 关键 帧 向 右 移 至 1 秒 20 帧 的 
位 置 。 将 “时 间 指 示 器 ” 移 至 2 秒 05 帧 的 位 置 ， 修 改 “变换 : 和 矩形 4” 选项 下 方 的 “位 置 ”属性 为 
(-60.0,0.0)， 在 当前 时 间 位 置 自动 添加 该 属性 关键 帧 ， 如 图 4-43 所 示 。“ 合 成 ”窗口 效果 如 图 4-44 
所 示 。 


图 4-43 图 4-44 


到 选择 “变换 矩形 8” 选 项 ， 将 该 选项 下 方 的 “位 置 ” 属 性 关键 帧 向 右 移 至 2 秒 04 帧 的 
位 置 。 将 “时 间 指 示 器 ” 移 至 2 秒 14 帧 的 位 置 ， 修 改 “ 变 换 : 矩形 8” 选 项 下 方 的 “位 置 ”属性 


为 (-60.0,60.0)， 在 当前 时 间 位 置 自动 添加 该 属性 关键 帧 ， 如 图 4-45 所 示 。 “合成 ”窗口 效果 如 医 
4-46 所 示 。 

本 将 “时 间 指示 器 ” 移 至 2 秒 13 帧 的 位 置 ， 选择 “变换 ;矩形 3” 选项, 单 击 该 选项 下 方 “位 
置 ”属性 左 侧 的 “添加 或 移 除 关 键 帧 ”按钮 ， 在 当前 位 置 添加 该 属性 关键 帧 ， 如 图 4-47 所 示 。 将 “时 
间 指 示 器 ” 移 至 2 秒 23 帧 的 位 置 ， 修 改 “ 变 换 : 矩形 3” 选 项 下 方 的 “位 置 ” 属 性 为 (0.0,60.0)， 在 


当前 时 间 位 置 自动 添加 该 属性 关键 帧 ， 如 医 
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4-48 所 示 。 


图 4-46 


图 4-47 


图 4-48 


“合成 " 窗口 效果 如 图 4-49 所 示 。 在 “时 间 轴 " 面板 中 拖 动 鼠标 同时 选中 所 有 的 属性 关键 帧 ， 


如 图 4-50 所 示 。 


图 4-49 


图 4-50 


现在 任意 一 个 关键 帧 上 右 击 ， 在 弹出 的 菜单 中 执行 “关键 帧 辅助 ”> “ 缓 动 ”命令 ， 为 所 有 选 


图 4-51 


中 的 关键 帧 应 用 组 动 效果 ,如 图 4-51 所 示 。 在“ 项目” 面板 的 合成 上 右 击 ,在 弹出 的 菜单 中 选择 “ 合 
成 设置 ”命令 ， 弹 出 “合成 设置 ”对 话 框 ， 修 改 “ 持 续 时 间 ” 为 2 秒 24 帧 ， 如 图 4-52 所 示 。 
i 


图 4-52 


而 所 表现 出 来 
真实 。 普 通 的 关键 帧 在 “时 间 轴 ”面板 中 显示 为 莹 和 
的 三 角形 


移动 


的 动画 得 更 加 站 外 果 ， 而 添加 了 “ 缓 动 ”效果 的 


| 关键 帧 图 标 显示 为 两 个 到 


轩 单 击 “ 确 定 ” 按 钮 ， 完 成 “合成 设置 ”对 话 框 的 设置 ，“ 时 间 轴 ”面板 如 图 4-53 所 示 。 


图 4-53 


到 完成 该 趣味 矩形 拼图 动 效 的 制作 , 单 击 “预览 "面板 上 的 “播放 /停止 ”按钮 国 ， 可 以 在 “ 合 
成 ”窗口 中 预览 动画 效果 ， 如 图 4-54 所 示 。 


图 4-54 


2 图 表 编 辑 器 的 操作 方法 人 E 


“图 表 编 辑 器 ”是 After Effects 在 整合 了 以 往 版 本 的 速率 图 表 的 基础 上 提供 的 更 强大 、 更 丰富 
的 动画 控制 功能 模块 ,使 用 该 功能 ,可 以 更 方便 地 查看 和 操作 属性 值 . 关 键 帧 .关键 帧 插值 和 速率 等 。 
单 


“时 间 轴 ”面板 上 的 “图 表 编 辑 器 ”按钮 图 ， 即 可 将 “时 间 轴 ”面板 右 侧 的 关键 帧 编辑 区 


域 切换 为 图 表 编辑 器 的 显示 状态 ， 如 图 4-55 所 示 。 
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“图 表 编 辑 器 ”界面 主要 是 以 曲线 图 的 形式 显示 所 使 用 的 效果 和 动画 的 改变 情况 。 曲 

包括 两 方面 的 信息 ， 一 方面 是 数值 图 形 ， 显 示 的 是 当前 属性 的 数值 ， 另 一 方面 是 速度 图 形 ， 显 示 的 
是 当前 属性 数值 速度 变化 的 情况 。 
名 “选择 具体 显示 在 图 表 编辑 器 中 的 属性 ” 按 馈 图 : 单 击 该 按钮 ， 可 以 在 弹 H 
图 表 编 辑 器 中 查看 的 属性 选项 ， 如 图 4-56 所 示 。 
“选择 图 表 类 型 和 选项 ”按钮 辆 : 单 击 该 按钮 ， 可 以 在 弹出 菜单 中 选择 图 表 编 辑 器 中 所 显示 的 


菜单 中 选择 需要 在 


= 


© 
图 表 类 型 以 及 需要 在 图 表 编辑 器 中 显示 的 相关 选项 ， 如 图 4-57 所 示 。 
加 “选择 多 个 关键 帧 时 ， 显 示 “ 变 换 ” 框 ”按钮 圈 : 该 按钮 默认 为 激活 状态 ， 在 图 表 编 辑 器 中 同 
时 选中 多 个 关键 帧 , 将 会 显示 变换 框 , 可 以 对 所 选中 的 多 个 关键 帧 进行 变换 操作 , 如 图 4-58 所 示 。 
且 动 和 择 图 志 关 型 
Y 。 转 吉 信 图 志 
第 二 这 度 加 表 
号 示 参 考 图 表 
显示 音频 波形 
显示 图 层 的 入 点 /出 点 
显示 图 层 标 忆 
Y | 显示 选择 的 尾 性 Y ， 显示 图 表 工 具 技巧 
显示 动画 尾 性 呈 寺 表达 式 篇 神器 
Y ”显示 图 表 和 编辑 器 集 允许 帧 之 间 的 关键 帧 
图 4-56 图 4-57 图 4-58 


“对 齐 ” 按 钮 国 : 该 按钮 默认 为 激活 状态 ， 表 示 在 图 表 编辑 器 中 进行 关键 帧 的 相关 操作 时 会 进 


行 自动 吸附 对 齐 操作 。 i 

“自动 缩放 图 表 高 度 ” 按 甸 图 : 该 按钮 默认 为 激活 状态 ， 表 示 将 以 曲 | ss. 

线 高 度 为 基准 自动 缩放 图 表 编辑 器 视图 。 ee 

“使 选择 适 于 查看 ” 按 甸 图 : 单 击 该 按钮 ， 可 以 将 被 选中 的 关键 帧 自 。 | 。 318 

动 调整 到 适合 的 视图 范围 ， 便 于 查看 和 编辑 。 ee 

“使 所 有 图 表 适 于 查看 ”按钮 图 : 单 击 该 按钮 ， 可 以 自动 调整 视图 ， i 

将 图 表 编辑 器 中 所 有 图 表 都 显示 在 视图 范围 内 。 站 

“单独 尺寸 ” 按 甸 图 : 单 击 该 按钮 ， 可 以 在 图 表 编辑 器 中 分 别 单独 显 。 | 。 要 3sezh 

示 属 性 的 不 同 控制 选项 。 er 
图 4-59 


与 在 关键 帧 上 右 击 所 弹出 的 编辑 选项 相同 ， 如 图 4-59 所 示 。 
“将 选 定 的 关键 帧 转换 为 定格 ”按钮 转 : 单 击 该 按钮 ， 可 以 将 当前 选择 的 关键 帧 保持 现 有 的 芭 
线 。 
“将 选 定 的 关键 帧 转换 为 线性 ”按钮 畏 : 单 击 该 按钮 ， 可 以 将 当前 选择 的 关键 帧 前 后 控制 手柄 
成 直线 。 
"将 选 定 的 关键 帧 转换 为 自动 贝 赛 尔 曲线 ”按钮 国 : 单 击 该 按钮 ， 可 以 将 当前 选择 的 关键 帧 前 
控制 手柄 变 成 自动 的 贝 塞 尔 曲线 。 
“ 缓 动 ” 按 包围 : 单 击 该 按钮 ， 可 以 为 当前 选择 的 关键 帧 添加 默认 的 组 动 效果 。 
“ 缓 入 ”按钮 园 : 单 击 该 按钮 ， 可 以 为 当前 选择 的 关键 帧 添加 默认 的 缓 入 动画 效果 。 
“组 出 ” 按 包 请: 单 击 该 按钮 ， 可 以 为 当前 选择 的 关键 帧 添加 默认 的 缓 出 动画 效果 。 


实例 07 一 “制作 弹跳 变形 动 效 © 


源 文件 : 源 文件 \ 第 4 章 M-1-4.aep ”视频 : 视频 \ 第 4 章 M-1-4.mp4 
加 在 After Effects 中 新 建 一 个 空白 的 项 目 ， 执 行 “ 合 成 ” >“ 新 建 合成 ” 命 


国 | 


将 


部 


可 


© 
© 
© 
© 
© 
加 “编辑 选 定 的 关键 帧 ”按钮 噶 : 单 击 该 按钮 ， 显 示 出 关键 帧 编辑 选项 ， 
© 
© 
© 
© 
© 
© 


EE 
E: 


令 ， 弹 出 “合成 设置 ”对 话 框 ， 对 相关 选项 进行 设置 ， 如 图 4-60 所 示 。 单 击 “ 确 定 ” 按 钮 ， 新 建 
合成 。 执 行 “ 文 件 ”>“ 导 入 ”> “文件 ”命令 ， 导 入 素材 41401jpg 和 41402.png，“ 项 目 ”面板 
如 图 4-61 所 示 。 


图 4-60 
现在 "项 目 " 面板 中 将 41401jpg 素材 拖 入 “时 间 轴 ”面板 中 , 将 该 图 层 锁定 , 如 图 4-62 所 示 。 
使 用 “矩形 工具 ”， 在 工具 栏 中 设置 “填充 ”为 白色 ，“ 描 边 ” 为 无 ， 在 “合成 ”窗口 中 按 住 Shift 
键 拖 动 鼠标 ， 绘 制 一 个 正方 形 ， 如 图 4-63 所 示 。 


图 4-62 图 4-63 


中 在 “时 间 轴 " 面板 中 , 展开 该 形状 图 层 下 方 的 "和 矩形 1" 选 项 下 的 "矩形 路 径 " 选项 , 设置 "大 小 ” 
属性 为 600, 如 图 4-64 所 示 。 使 用 "向 后 平移 ( 锚 点 ) 工具 ”, 调整 刚刚 所 绘制 的 正方 形 的 中 心 点 位 置 ， 


如 图 4-65 所 示 。 


图 4-64 图 4-65 

蕊 按 快捷 键 Ctt+R, 在 “合成 " 窗口 中 显示 出 标尺 , 从 标尺 中 拖 出 参数 线 , 定位 图 形 降落 的 位 置 ， 
并 调整 该 正方 形 至 合适 的 位 置 , 如 图 4-66 所 示 。 在 “时 间 轴 ”面板 中 展开 “形状 图 层 1” 的 属性 选项 ， 
单 击 “ 内 容 ” 选 项 右 侧 的 “添加 ”按钮 ， 在 弹出 的 菜单 中 选择 “ 圆 角 ”选项 ， 如 图 4-67 所 示 。 


本 
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四 
"图 


图 4-66 


| 
缩放、 旋转 等 变换 
形 下 落 的 位 置 


调整 所 绘制 图 形 的 中 心 点 位 置 为 图 形 的 中 心 ， 因 为 后 面 人 
操作 都 是 以 中 要 


点 为 中 心 进行 的 。 拖 信人 参考 
三 为 该 图 形 添加 “ 圆 角 ”属性 ， 展 开 “ 圆 角 1” 选项， 设置“ 半径” 为 300， 如 图 4-68 所 示 。 
在 “合成 ”窗口 中 可 以 看 到 正方 形变 成 了 正 圆 形 ， 如 图 4-69 所 示 。 


到 形 进行 缩放 等 操作 ， 图 天 
制作 动画 的 过 程 中 方便 确定 医 


0:00:00:00 


oPea 申 


图 4-68 图 4-69 


加 “ 圆 角 ”属性 ， 是 后 面 过 程 中 从 圆 形 转变 为 圆 角 和 矩形 的 关键 所 在 。 在 圆 角 的 | 
制 的 正方 形 大 小 不 同 ， 所 需要 设置 的 “半径 ” 值 也 会 有 所 不 同 ， 也 可 以 直接 在 “半径 ”属性 值 
-个 较 大 的 值 ， 因 为 变 成 圆 以 后 即使 再 大 的 半径 值 也 还 是 正 圆 形 


此 处 
半径 值 时 ， 根 据 
上 拖 动 鼠标 调整 


XB 确认 “时 间 指 示 器 ”位 于 0 秒 位 置 ， 为 “半径 ”属性 插入 关键 帧 ， 展 开 “ 内 容 ” 选 项 中 “和 矩 


5 1” 选 项 中 的 “和 矩形 路 径 1” 选 项 ， 为 “大 小 ”属性 插入 关键 帧 ， 如 图 4-70 所 示 。 展 开 “ 形 状 区 
层 1” 图 层 的 “变换 ”选项 ， 为 “位 置 ” 属 性 插入 关键 帧 ， 如 图 4-71 所 示 。 


0:00:00:00 


oa 9 


0:00:00:00 
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图 4-70 图 4-71 


在 该 图 层 的 动画 中 , 主要 制作 的 是 该 图 层 中 所 绘制 的 “ 矩 形 1” 这 个 形状 图 形 的 “大 小 ” 和 “半径 ”属性 动画 效果 ， 
以 及 该 形状 图 层 整体 的 “位 置 ”属性 动画 。 注意 , “大 小 ”和 “半径 ”属性 是 针对 该 图 层 中 指定 的 形状 图 形 的 , 而 “位 
置 ”属性 是 针对 整个 图 层 的 


加 选择 “形状 图 层 1”， 按 快捷 键 U， 在 该 图 层 下 方 只 显示 出 添加 了 关键 帧 的 属性 ， 如 图 
4-72 所 示 。 首 先 制作 圆 球 下 落 的 动画 效果 。 将 图 形 垂直 向 上 移出 场景 中 ， 如 图 4-73 所 示 。 


图 4-72 图 4-73 


图 层 下 方 默 认 的 属性 以 及 可 添加 的 属性 非常 多 ， 如 果 只 是 为 其 中 的 某 几 个 属性 插入 了 关键 帧 ， 并 需要 制作 ; 
个 属性 的 关键 帧 动画 ， 那 么 把 图 层 中 的 属性 全 部 展开 ， 非 常 麻烦 。 按 快捷 键 U， 可 以 在 所 选择 图 层 下方 只 显示 添加 
了 关键 帧 的 属性 ， 非 常 方便 


了 B 将 “时 间 指 示 器 ” 移 至 0 秒 13 帧 的 位 置 ， 在 “合成 ”窗口 中 将 图 形 向 下 移 至 合适 的 位 置 ， 
妈 4-74 所 示 。 将 “时 间 指 示 器 ” 移 至 1 秒 的 位 置 ， 在 “合成 ”窗口 中 将 图 形 向 上 移 至 合适 的 位 置 ， 
妈 4 一 75 所 示 。 


从 并 


图 4-74 图 4-75 

了 完成 该 图 形 下 落 弹 起 的 动画 ， 在 “时 间 轴 ”面板 中 同时 选中 “位 置 ”属性 的 3 个 关键 帧 ， 
如 图 4-76 所 示 。 在 关键 帧 上 右 击 ， 在 弹出 的 菜单 中 执行 “关键 帧 辅助 ”> “ 缓 动 ”命令 ， 或 者 按 快 
捷 键 F9， 为 选中 的 关键 帧 应 用 “ 缓 动 ”效果 ， 如 图 4-77 所 示 。 

了 0) 接 下 来 需要 在 图 表 编 辑 器 中 调整 图 形 落下 的 缓 动 效 果 。 单 击 " 时 间 轴 "面板 上 的 "图 表 编辑 器 ” 
按钮 图 ， 切 换 到 图 表 编 辑 器 的 显示 状态 ， 如 图 4-78 所 示 。 单 击 “ 选 择 图 表 类 型 和 选项 ” 按 馈 贺 ,在 
弹出 的 菜单 中 选择 “编辑 速度 图 表 ” 选 项 ， 苦 击 “使 所 有 图 表 适 于 查看 ” 按 名 图 ， 使 该 部 分 图 于 
充满 整个 面板 ， 如 图 4-79 所 示 。 
融 根据 运动 规律 ， 对 速度 线 进行 调整 ， 选中 曲线 锚 点 ， 显 示 黄 色 的 方向 线 ， 拖 动 即 可 调整 
速度 曲线 ， 如 图 4-80 所 示 。 再 次 单 击 “ 图 表 编 辑 器 ”按钮 ， 返 回 到 “时 间 轴 ”面板 ， 接 下 来 制作 


该 图 形 下 落 过 程 中 变形 的 动画 效果 。 将 “时 间 指 示 器 ” 移 至 0 秒 11 帧 的 位 置 ， 修 改 “ 大 小 ”属性 为 
(500.0,600.0)， 改 变 图 形 的 形状 ， 如 图 4-81 所 示 。 


0:00:01:00 


od 和 jeh ® 


图 4-76 


图 4-78 图 4-79 


图 4-80 图 4-81 

B 将 “时 间 指示 器 ” 移 至 0 秒 13 帧 的 位 置 ， 修改“ 大 小 ”属性 为 (600.0,500.0)， 并 将 其 调整 

合适 的 位 置 ， 如 图 4-82 所 示 。 选 择 “大 小 ”属性 起 始 位 置 的 关键 帧 ， 按 快捷 键 Ctrl+C 进行 复制 ， 
将 “时 间 指 示 器 ” 移 至 1 秒 位置 ， 按 快捷 键 Ctt+V， 粘 贴 关 键 帧 ， 效 果 如 图 4-83 所 示 。 


自 


图 4.82 图 4.83 
五 在 “时 间 轴 ”面板 中 同时 选中 “大 小 ”属性 的 4 个 关键 帧 ， 如 图 4-84 所 示 。 按 快捷 键 
F9， 为 这 4 个 关键 帧 应 用 “ 缓 动 ”效果 ， 关 键 帧 如 图 4-85 所 示 。 


于 将“ 时间 指 示 器 " 移 至 1 秒 的 位 置 , 在 “项 目 " 面板 中 将 41402.png 素 材 拖 入 “时 间 轴 " 面板 中 ， 
并 将 其 调整 到 与 下 方 的 圆 形 差不多 的 大 小 和 位 置 ， 如 图 4-86 所 示 。 选 中 41402.png 图 层 ， 按 快捷 键 
T， 显 示 该 图 层 的 “不 透明 度 ” 属 性 ， 降 低 该 图 层 的 不 透明 度 ， 如 图 4-87 所 示 。 
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图 4-84 图 4-85 


图 4-86 图 4-87 
了 8 将 “时 间 指 示 器 ” 移 至 0 秒 19 帧 的 位 置 ， 选 择 “ 形 状 图 层 1” 下 方 的 “半径 ”属性 ， 单 击 
该 属性 左 侧 的 “添加 和 删除 关键 帧 ”按钮 圈 , 在 当前 位 置 插入 该 属性 关键 帧 ， 如 图 4-88 所 示 。 将 “时 
间 指 示 器 ” 移 至 1 秒 位 置 ， 修 改 “ 半 径 ”属性 值 ， 使 图 形 的 圆 角 效果 与 41402.png 这 个 图 标的 圆 角 
效果 差不多 ， 如 图 4-89 所 示 。 


图 4-88 图 4-89 


了 选择 “形状 图 层 1” 图 层 ， 按 快捷 键 R， 在 该 图 层 下 方 显 示 “ 旋 转 ”属性 ， 将 “时 间 指 示 器 ” 
移 至 0 秒 19 帧 的 位 置 ， 为 “旋转 ”属性 插入 关键 帧 ， 如 图 4-90 所 示 。 将 “时 间 指 示 器 ” 移 至 1 秒 
的 位 置 ， 设 置 “ 旋 转 ”属性 值 为 180"， 如 图 4-91 所 示 。 


图 4-90 图 4-91 


珊 在 “时 间 轴 ”面板 中 同时 选中 “旋转 ”属性 的 2 个 关键 帧 ， 如 图 4-92 所 示 。 按 快捷 键 
F9， 为 这 2 个 关键 帧 应 用 “ 缓 动 ”效果 ， 关 键 帧 如 图 4-93 所 示 。 


0:00:01:00 
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图 4-92 图 4-93 
下 选择 41402.png 图 层 ， 将 “时 间 指 示 器 ” 移 至 1 秒 的 位 置 ， 设 置 其 “不 透明 度 ” 属 性 为 
0%， 并 为 该 属性 插入 关键 帧 ,如 图 4-94 所 示 。 将 “时 间 指 示 器 ” 移 至 1 秒 14 帧 的 位 置 , 设置 其 “不 
透明 度 ”属性 为 100% ， 如 图 4-95 所 示 。 


了 
0200201:00 


图 4-94 图 4-95 

更 在 “项 目 ” 面板 的 合成 上 右 击 ， 在 弹出 

的 菜单 中 选择 “合成 设置 " 命令 , 弹出 “合成 设置 " 

对 话 框 , 修改 “持续 时 间 ” 为 3 秒 , 如 图 4-96 所 示 。 

单 击 “确定 " 按钮 , 完成 “合成 设置 " 对 话 框 的 设置 ， 
“时 间 轴 ”面板 如 图 4-97 所 示 。 


图 4-96 


冯 ) 完成 弹跳 变形 动 效 的 制作 ， 单 击 “ 预 览 ”面板 上 的 “播放 /停止 ”按钮 国 ， 可 以 在 “合成 ” 
窗口 中 预览 动画 效果 ， 如 图 4-98 所 示 。 


gy 


图 4-98 


形状 的 应 用 p 


在 After Effects 中 ， 使 用 形状 工具 可 以 很 容易 地 绘制 出 矢量 形状 图 形 ， 并 且 可 以 为 这 些 形状 图 
形制 作 动画 效果 。 形 状 工具 为 动画 制作 提供 了 无 限 的 可 能 ， 尤 其 是 形状 组 中 的 颜料 属性 和 路 径 变形 
属性 ， 在 本 节 中 将 向 读者 介绍 形状 的 创建 与 属性 设置 。 


C2 关于 形状 -个 


形状 工具 可 以 处 理 矢量 图 形 、 位 图 和 路 径 等 ， 如 果 绘制 的 路 径 是 封闭 的 ， 可 以 将 封闭 的 路 径 作 
为 蒙 版 使 用 ， 因 此 ， 在 After Effects 中 形状 工具 常用 于 绘制 蒙 版 和 路 径 。 


除 1. 矢量 图 形 


构成 矢量 图 形 的 直线 或 曲线 都 是 由 计算 机 中 的 数学 算法 来 定义 的 ， 数 学 算法 采用 几何 学 的 特征 
来 描述 这 些 形状 。 在 After Effects 中 使 用 形状 工具 所 绘制 的 形状 和 路 径 ， 以 及 使 用 文字 工具 输入 的 
文字 都 是 矢量 图 形 ， 将 这 些 图 形 放 大 N 倍 ， 仍 然 可 以 清楚 地 观察 到 图 形 的 边缘 是 光滑 平整 的 ， 如 医 
4-99 所 示 。 


位 图 又 称 为 栅 格 化 图 像 ， 位 图 是 由 许多 带 有 不 同 颜色 信息 的 像素 点 构成 的 ， 其 图 像 质量 取决 于 
像 的 分 辨 率 。 图 像 的 分 辩 率 越 高 ， 图 像 看 起 来 就 越 清 晰 ， 图 像 文件 需要 的 存储 空间 也 越 大 ， 所 以 
当 放大 位 图 时 ， 图 像 的 边缘 会 出 现 锯齿 现象 ， 如 图 4-100 所 示 。 
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在 After Effects 中 可 以 导入 其 他 软件 制作 的 矢量 图 形 文件 (例如 AI 格式 文件 )， 在 导入 这 些 矢量 图 形 文件 之 后 ， 
After Effects 会 自动 将 这 些 矢量 图 形 文件 栅 格 化 。 


After Effects 中 的 遮 测 和 形状 都 是 基于 A 一 
路 径 的 概念 。 一 条 路 径 是 由 点 和 线 构成 的 ， 
线 可 以 是 直线 也 可 以 是 曲线 , 曲线 来 连接 点 ， 
而 点 则 定义 了 线 的 起 点 和 终点 。 上 
在 After Effects 中 ， 可 以 使 用 形状 工具 | 
来 绘制 标准 的 几何 形状 路 径 , 也 可 以 使 用 " 钢 
笔 工 具 ” 来 绘制 复杂 的 形状 路 径 ， 通 过 调整 
路 径 上 的 点 或 调整 点 的 控制 手柄 ， 可 以 改变 


路 径 的 形状 ， 如 图 4-101 所 示 。 

A 为 选中 的 顶点 ，B 为 选中 的 顶点 ，C 国生 
为 未 选中 的 项 点，D 为 曲线 路 径 ，E 为 方向 线 ，F 为 方向 手柄 。 

路 径 有 两 种 顶点 ， 边 角 点 和 平滑 点 。 在 平滑 点 上 ， 路 径 段 被 连接 成 一 条 光滑 的 曲线 ， 平 滑 点 两 
例 的 方向 线 在 同一 直线 上 。 在 边 角 点 上 ， 路 径 突然 更 改 方向 ， 边 角 点 两 侧 的 方向 线 在 不 同 的 直线 上 。 
用 户 可 以 使 用 边 角 点 和 平滑 点 的 任意 组 合 绘制 路 径 ， 如 果 绘制 了 错误 种 类 的 边 角 点 或 平滑 点 ， 还 可 
以 使 用 “转换 “项 点， 工具 ”对 其 进行 修改 
当 移动 平滑 点 的 方向 线 时 ， 点 两 侧 的 曲线 会 同时 进行 调整 ， 如 图 4-102 所 示 。 相 反 ， 当 移动 边 
角 点 的 方向 线 时 ， 只 会 调整 与 方向 线 在 该 点 的 相同 边 的 曲线 ， 如 图 4-103 所 示 。 


信人 


图 4-102 图 4-103 


和 创建 路 径 群 组 © 

在 After Effects 中 ， 每 条 路 径 都 是 一 个 形状 ， 而 每 个 形状 都 包含 “填充 ”和 “ 描 边 ” 属 性 ， 这 
些 属性 都 包含 在 形状 图 层 的 “内 容 ” 选 项 组 中 ， 如 图 4-104 所 示 。 

在 实际 工作 中 ， 有 时 需要 绘制 比较 复杂 的 路 径 图 形 ， 至 少 需要 绘制 多 条 路 径 才 能 够 完成 操作 ， 
而 一 般 制 作 形 状 动画 都 是 针对 整个 形状 图 形 来 进行 的 。 因 此 ， 如 果 需 要 为 单独 的 路 径 制作 动画 ， 就 
会 比较 困难 ， 这 时 候 就 需要 使 用 到 路 径 形状 的 “ 群 组 ”功能 。 

如 果 需 要 为 路 径 创建 群 组 ， 可 以 同时 选择 多 条 需要 创建 群 组 的 路 径 ， 执行 “图 层 ”>“ 组 合 形状 ” 
命令 ， 或 者 按 快捷 键 Ctt+G， 即 可 将 选中 的 多 条 路 径 进行 群 组 操作 。 

完成 路 径 的 群 组 操作 后 ， 群 组 的 路 径 就 会 被 归 入 相应 的 组 中 。 另 外 , 还 会 增加 一 个 “变换 : 组 1” 
属性 ， 如 图 4-105 所 示 。 
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图 4-104 
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图 4-105 


如 果 需 要 解散 路 径 群 组 ， 可 以 选中 群 组 的 路 径 ， 执 行 “ 图 层 ”> “取消 组 合 形状 ”命令 ， 或 按 快 


捷 键 Ctrl+Shift+G， 即 可 解散 路 径 群 组 。 


2.3] 


在 “合成 ”窗口 中 绘制 一 个 路 径 形状 之 后 ， 可 以 在 该 形状 图 层 下 方 的 “内 容 ” 选 项 右 侧 的 “ 添 
加 ”选项 位 置 单 击 “添加 ”按钮 回 ， 在 弹出 的 菜单 中 可 以 选择 为 该 形状 或 形状 组 添加 属性 设置 ， 如 
图 4-106 所 示 。 


出 下 AL 路 径 属性 


趟 -路 径 颜 色 属性 
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图 4-106 


加 ”路径 属 性 : 选择 “和 矩形 ”“ 椭 圆 ” 和 “多 边 星 形 ”选项 ， 即 可 在 当前 路 径 形状 中 添加 一 个 相应 
的 子路 径 ， 如 果 选 择 “ 路 径 ” 选 项 ， 可 以 切换 到 “钢笔 工具 ”状态 ， 然 后 在 当前 路 径 形状 中 给 
制 一 个 不 规则 的 子路 径 。 


| 
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加 ”路径 颜色 属性 : 包含 “填充 ”“ 描 边 ”“ 渐 变 填充 ”和 “渐变 描 边 ”4 种， 其 中 “填充 ” 属 
来 设置 形状 图 形 内 部 的 填充 颜色 ，“ 描 边 ” 属 性 用 来 设置 路 径 描 边 颜色 ，“ 渐 变 填充 ” 属 


pe 到 形 内 部 的 渐变 填充 颜色 ，“ 渐 变 描 边 ”属性 用 来 为 路 径 设置 渐变 描 边 颜色 。 效 果 
到 4-107 Dn 


描 边 
图 4-107 

回路 径 变形 属性 ;路径 变形 属性 可 以 对 当前 所 选择 的 路 径 或 者 路 径 组 中 的 所 有 路 径 起 作用 。 另 外 ， 
可 以 对 路 径 变形 属性 进行 复制 、 剪 切 、 粘 贴 等 操作 。 
(1) 合并 路 径 
该 属性 主要 针对 群 组 路 径 ， 为 一 个 群 组 路 径 添加 该 属性 后 ， 可 以 运用 特定 的 运算 方法 将 群 组 中 
的 路 径 合并 起 来 。 为 群 组 路 径 添 加 “合并 路 径 ”属性 后 ， 可 以 为 群 组 路 径 设置 4 种 不 同 的 模式 ， 效 
果 如 图 4-108 所 示 。 


on 


| | 
人 
“ 相 加 ”模式 “ 相 碱 ”模式 排除 交集 ”模式 
图 4-108 
(2) 位 移 路 径 
使 用 该 属性 可 以 对 原始 路 径 进行 位 移 操作 ， 当 位 移 值 为 正 值 时 ， 将 会 使 路 径 向 外 扩展 ， 当 位 移 


值 为 负 值 时 ， 将 会 使 路 径 向 内 收缩 ， 如 图 4-109 所 示 。 
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图 4-109 


(3) 收缩 和 膨胀 
使 用 该 属性 可 以 使 源 曲 线 中 向 外 凸 起 的 部 分 向 内 塌陷 ， 向 内 凹陷 的 部 分 往外 凸 起 ， 如 图 4-110 


所 示 。 
( 中 继 器 
使 用 该 属性 可 以 复制 一 个 路 径 形状 ， 然 后 为 每 个 复制 得 到 的 对 象 应 用 指定 的 变换 属性 ， 如 医 


4-111 所 示 。 
(5) 圆 角 


使 用 该 属性 可 以 对 路 径 形状 中 尖锐 的 拐角 点 进行 圆滑 处 理 ， 如 图 4-112 所 示 。 


图 4-110 


图 4-111 图 4-112 
(6) 修剪 路 径 
为 路 径 形状 添加 该 属性 ， 并 配合 该 属性 值 的 设置 可 以 制作 出 路 径 形状 的 修剪 动画 效果 ， 如 医 


4-113 所 示 。 


图 4-113 


(7) 扭转 


使 用 该 属性 可 以 以 路 径 形状 的 中 心 为 圆心 对 路 径 形状 进行 扭曲 操作 ， 当 设置 “角度 ”属性 值 为 
正 值 时 ， 可 以 使 路 径 形状 按照 顺 时 针 方向 进行 扭曲 ， 如 图 4-114 所 示 。 当 设置 “角度 ”属性 值 为 负 
值 时 ， 可 以 使 路 径 形状 按 逆 时 针 方向 进行 扭曲 ， 如 图 4-115 所 示 。 


图 4-114 图 4.115 
(8) 摆动 路 径 
该 属性 可 以 将 路 径 形状 变 成 各 种 效果 的 锯齿 形状 路 径 , 并 且 会 自动 记录 下 动画 , 如 图 4-116 所 示 。 


本 
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(9)Z 字形 
该 属性 可 以 将 路 径 形状 变 成 具有 统一 规律 的 锯齿 状 形 状 图 形 ， 如 图 4-117 所 示 。 


图 4-116 图 4-117 


实例 08 一 一 制作 简单 的 Loading 动 效 


源 文件 : 源 文件 \ 第 4 章 M-2-3.aep 视频: 视频 \ 第 4 章 M-2-3.mp4 

到 在 After Effects 中 新 建 一 个 空白 的 项 目 ， 执 行 “ 合 成 ”> “新建 合 成 ”命令 ， 
弹出 “合成 设置 " 对 话 框 , 对 相关 选项 进行 设置 , 如 图 4-118 所 示 , 单 击 “确定 " 按钮， 
新 建 合成 。 使 用 “椭圆 工具 ”， 设 置 “填充 ”为 无 ，“ 描 边 ” 为 # FFDC2D，“ 描 边 粗细 ”为 155 像 


素 ， 如 图 4-119 所 示 。 


图 4-118 图 4-119 
六 在 “合成 ”窗口 中 按 住 Shift 键 拖 动 鼠 标 ， 绘 制 一 个 正 圆 形 ， 自 动 创建 形状 图 层 ， 如 医 
4-120 所 示 。 使 用 “向 后 平移 ( 锚 点 ) 工具 ”， 调 整 刚 绘制 的 正 圆 形 的 中 心 点 位 于 图 形 的 中 心 位 置 ， 
如 图 4-121 所 示 。 


图 4-120 图 4-121 


了 打开 “对 齐 ” 面 板 ， 单 击 “ 水 平 对 齐 ” 和 “垂直 对 齐 ” 按 钮 ， 将 所 绘制 的 正 圆 形 与 舞台 进 
行 对 齐 操作 ， 如 图 4-122 所 示 。 选 项 “形状 图 层 1” 下 方 “内 容 ” 选 项 中 的 “椭圆 1” 选项， 单 击 “ 内 
容 ” 选 项 右 侧 的 “添加 ”按钮 图 ， 在 弹出 的 菜单 中 选择 “修剪 路 径 ”选项 ,为 “形状 图 层 1” 添 加 “ 修 


第 4 章 在 After Effects 中 制作 动 效 并 输出 


剪 路 径 ”属性 ， 如 图 4-123 所 示 。 


图 4-122 图 4-123 

双 确认 “时 间 指 示 器 ”位 于 0 秒 位 置 ， 展开“ 修剪 路 径 1” 选 项 ， 对 “开始 ”和 “结束 ” 属 
性 进行 设置 ， 并 为 这 两 个 属性 插入 关键 帧 ， 如 图 4-124 所 示 。 在 “合成 ”窗口 中 可 以 看 到 正 圆 形 完 
全 消失 ， 如 图 4-125 所 示 。 


图 4-124 图 4-125 
了 有 B 将 “时间 指示 器 " 移 至 4 秒 位 置 , 对 “修剪 路 径 1" 选项 中 的 “开始 " 和 "结束 " 属性 进行 设置 ， 
自动 添加 属性 关键 帧 ， 如 图 4-126 所 示 。 在 “合成 ”窗口 中 可 以 看 到 正 圆 形 完全 显示 的 效果 ， 如 图 
4-127 所 示 。 


妈 4-126 图 4-127 

了 同时 选中 “形状 图 层 1” 中 的 所 有 属性 关键 帧 ， 在 关键 帧 上 右 击 ， 在 弹出 的 菜单 中 执行 “ 关 
键 帧 辅助 ”>“ 缓 动 ”命令 ， 如 图 4-128 所 示 。 为 选中 的 多 个 关键 帧 添加 “ 缓 动 ”效果 ， 完 成 “ 缓 动 ” 
效果 的 添加 后 ， 可 以 看 到 关键 帧 图 标 发 生 了 变化 ， 如 图 4-129 所 示 。 

取 执行 "图 层 ” >“ 新 建 ” >“ 纯色 ”命令 ， 弹 出 “纯色 设置 ”对 话 框 ， 设 置 如 图 4-130 所 示 。 
“确定 ”按钮 ， 新 建 纯色 图 层 ， 如 图 4-131 所 示 。 
选择 刚 新 建 的 纯色 图 层 ， 执 行 “ 效 果 ”> "文本 >“ 编号 ”命令 ， 弹 出 “编号 ”对 话 框 ， 
设置 如 图 4-132 所 示 。 单 击 “确定 ”按钮 ， 为 其 应 用 “编号 ”效果 ， 在 “合成 ”窗口 中 可 以 看 到 自 
动 生 成 的 编号 文字 ， 如 图 4-133 所 示 。 
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低 
[ah 


After Effects CC 移动 网 站 UI 交互 动 效 设 计 全 程 揭 秘 


Cel+Shift+F9 
三 


图 4-129 


图 4-131 


图 4-133 
了 在 打开 的 “效果 控件 ”面板 中 对 相关 选项 进行 设置 ， 如 图 4-134 所 示 。 在 “合成 ”窗口 中 
可 以 看 到 为 纯色 图 层 应 用 “编号 ”效果 得 到 的 编号 文字 效果 ， 如 图 4-135 所 示 。 


图 4-134 图 4-135 


了 0 将 “时 间 指示 器 ” 移 至 0 秒 位 置 ， 展开 纯色 图 层 下 方 “ 效 果 ” 选 项 中 “编号 ”选项 中 的 “ 格 
式 "选项 , 为 “数值 /位 移 / 随 机 最 大 ”属性 插入 关键 帧 , 如 图 4-136 所 示 。 展开 “编号 " 选项 中 的 “ 填 


充 和 描 边 ”选项 ,为 “ 


填充 颜色 ”选项 插入 关键 帧 ， 如 医 


4-137 所 示 。 


图 4-136 


图 4-137 


于 将 “时 间 指示 器 ” 移 至 4 秒 位 置 ， 设 置 “ 数 值 /位 移 /随机 最 大 ”属性 值 为 100， 设 置 “ 填 


色 ” 为 #805800， 


间 轴 ” 


板 如 医 


4-139 所 示 。 


自动 在 当前 位 置 为 这 两 个 属性 插入 关键 帧 ，" 合 成 ” 


窗口 如 医 


“时 


4-138 所 示 ， 


EN 


板 


习 4- 4 4-139 
吏 使 用 “ 横 排 文字 工具 ”， 在 “合成 ”窗口 中 合适 的 位 置 单 击 并 输入 文字 ， 在 “字符 ” 
中 对 文字 的 相关 属性 进行 设置 ， 效 果 如 图 4-140 所 示 。。 单 击 文字 图 层 下 方 的 “文本 ”选项 右 侧 的 “ 动 
画 ” 选 项 后 的 “添加 ” 按 馈 贺 ,在 弹出 的 菜单 中 选择 “填充 颜色 ”> RGB 命令 , 为 该 文字 图 层 添 加 “" 填 
充 颜色 ”属性 ， 如 图 4-141 所 示 。 


礁 将 “时 间 指 示 器 ” 移 至 0 秒 位 置 ， 为 
间 指 示 器 ” 移 至 4 秒 位置 ， 设 置 “ 填 充 颜色 ”为 #805800， 


图 4-140 


图 4-141 


“填充 颜 


为 白色 ， 如 图 4-142 所 示 。 将 “时 
在 当前 位 置 为 该 属性 插入 关键 帧 ， 如 图 4-143 所 示 。 

可 同 时 选中 纯色 图 层 和 文字 图 层 ， 执 行 “图 层 ”>“ 预 合成 " 
设置 如 图 4-144 所 示 。 单 击 “ 确 定 ” 按 钮 ， 创 建 预 合成 ， 在 “合成 ” 窗 
适 的 位 置 ， 如 图 4-145 所 示 。 

琵 完成 该 简单 Loading 动 效 的 制作 ， 执 行 “文件 ”>“ 保 存 
将 该 文件 进行 保存 。 单 击 “ 预 览 ” 面 板 上 的 “播放 /停止 ”按钮 畏 , 可 
画 效果 ， 如 图 4-146 所 示 。 


公公 痢 吕 
信人 客 ， 哩 U 


”属性 插入 关键 帧 ， 并 设置 该 “填充 颜色 ” 


动 


上 “ 预 合成 ”对 话 框 ， 


9 公公 


， 弹 上 


他 伪 


中 将 百分比 数字 调整 至 合 


bb “另存 为 ”对 话 框 ， 


义 在 “合成 ”窗口 中 预览 动 
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图 4-144 


[ 


图 4-146 


图 4-145 


运动 路 径 通 常 是 指 对 象 位 置 变 化 的 轨迹 ， 路 径 动 画 是 我 们 常见 的 一 种 动画 类 型 ， 它 在 其 他 动画 


制作 软件 中 使 用 曲线 来 控制 动画 的 路 径 ， 而 在 After Effects 中 也 是 如 此 。 图 层 属性 中 的 各 种 关键 帧 动 
画 ， 除 了 不 透明 度 属性 的 动画 外 ， 其 他 属性 动画 都 可 以 通过 父 级 关系 ， 实 现 不 同 图 层 中 的 对 象 来 执 
行 相同 的 动画 播放 。 


FT 


在 After Effects 中 制作 的 元 素 位 置 变 化 的 关键 帧 动画 ， 默认 情况 下 位 置 变化 的 运动 轨迹 为 直线 ， 
如 图 4-147 所 示 。 
如 果 需 要 将 默认 的 直线 运动 路 径 调整 为 曲线 运动 路 径 ， 只 需要 使 用 “选取 工具 ”， 在 “合成 ” 
窗口 中 拖 动 调整 位 置 属性 锚 点 的 方向 线 , 如 图 4-148 所 示 。 即 可 将 直线 运动 路 径 修改 为 曲线 运动 路 径 ， 
如 图 4-149 所 示 。 
如 果 希 望 获 到 更 为 复杂 的 曲线 运动 路 径 ， 还 可 以 使 用 “添加 “顶点 : 工具 ”在 运动 路 径 上 合适 
的 位 置 单 击 ， 添 加 锚 点 ， 如 图 4-150 所 示 。 再 使 用 “选取 工具 ”， 对 运动 路 径 上 的 锚 点 和 方向 线 进 
行 调整 ， 从 而 获得 更 为 复杂 的 曲线 运动 路 径 ， 如 图 4-151 所 示 。 


[ey 


图 4-147 


a 


图 4-148 图 4-149 


自 


a 


图 4-150 | 图 4.151 
完成 运动 路 径 的 调整 后 ， 单 击 “ 预 览 ”面板 上 的 “播放 /停止 ” 按 包 圈 ， 查 看 元 素 的 运动 轨迹 ， 
可 以 发 现 元 素 沿 着 设置 好 的 曲线 运动 路 径 进行 位 移 ， 如 图 4-152 所 示 。 


a 
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曲线 路 径 开始 位 移 ， 但 是 小 蜜蜂 的 方向 并 没 
有 随 着 曲线 运动 路 径 而 改变 ， 这 是 因为 在 “自动 方向 ”对 话 框 中 的 “自动 方向 ”选项 默认 为 关闭 状态 。 
执行 "图 层 " > “变换 "> “自动 方向 " 命令 , 弹出 “自动 方向 " 对 话 框 , 设置 "自动 方向 " 选项 为 “ 沿 
路 径 定 向 ”， 如 图 4-153 所 示 。 单 击 “ 确 定 ”按钮 ， 完 成 “自动 方向 ”对 话 框 的 设置 ， 再 次 播放 动 
画 ， 可 以 看 到 小 蜜蜂 在 沿 着 曲线 路 径 运动 的 过 程 中 ， 其 自身 的 方向 也 会 随 着 路 径 的 方向 发 生 改 变 ， 
如 图 4-154 所 示 。 


图 4-153 


实例 09 一 “制作 魔法 飞行 动 效 人 


源 文件 : 源 文件 \ 第 4 章 M-3-2.aep 视频 : 视频 \ 第 4 章 M-3-2.mp4 


0 在 After Effects 中 新 建 一 个 空白 的 项 目 ， 执 行 “ 合 成 ” >“ 新 建 合成 ”命令 ， 
弹出 “合成 设置 " 对 话 框 , 对 相关 选项 进行 设置 , 如 图 4-155 所 示 , 单 击 “确定 " 按钮 ， 
新 建 合成 。 执 行 “ 文 件 ”>“ 导 入 ”> “文件 ”命令 ， 导 入 素材 43201.jpg 和 43202.png，“ 项 目 ” 面 
板 如 图 4-156 所 示 。 


图 4-155 图 4-156 

到 在 “项 目 ” 面 板 中 将 43201.jpg 素材 拖 入 “时 间 轴 ”面板 中 ， 效 果 如 图 4-157 所 示 。 选 择 
该 素材 图 层 ， 按 快捷 键 T， 显 示 出 该 图 层 的 “不 透明 度 ” 属 性 ， 确 认 “ 时 间 指 示 器 ”位 于 0 秒 位 置 ， 
为 “不 透明 度 ” 属 性 插入 关键 帧 ， 并 设置 该 属性 值 为 0% ， 效 果 如 图 4-158 所 示 。 

BB 将 “时 间 指 示 器 ” 移 至 0 秒 10 帧 位 置 ， 设 置 该 图 层 的 “不 透明 度 ” 属 性 值 为 50%， 效 
果 如 图 4-159 所 示 。 将 “时 间 指 示 器 ” 移 至 0 秒 20 帧 位 置 ， 设 置 该 图 层 的 “不 透明 度 ” 属 性 值 为 
10% ， 效 果 如 图 4-160 所 示 。 
加 将 “时 间 指 示 器 ” 移 至 1 秒 15 帧 的 位 置 ， 设 置 该 图 层 的 “不 透明 度 ”属性 值 为 100% ， 效 
果 如 图 4-161 所 示 。 完 成 背景 逐渐 显示 动画 的 制作 ，“ 时 间 轴 ”面板 如 图 4-162 所 示 。 

有 在 “项 目 ” 面板 中 将 43202.png 素材 拖 入 “时 间 轴 ”面板 中 ， 在 “合成 ” 中 将 其 调整 
到 合适 的 位 置 ， 如 图 4-163 所 示 。 选择 43202.png 图 层 , 按 快捷 键 P， 显 示 出 该 图 层 的 “位 置 ” 属 性 ， 


第 4 章 在 After Effects 中 制作 动 效 并 输出 


确认 “时 间 指 示 器 ”位 于 1 秒 15 帧 的 位 置 ， 为 “位 置 ” 属 性 插入 关键 帧 ， 如 图 4-164 所 示 。 
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图 4-158 
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图 4-160 
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图 4-161 图 4-162 


图 4-163 图 4-164 


有 EB 将 “时 间 指 示 器 ” 移 至 2 秒 15 帧 的 位 置 ， 在 “合成 ”窗口 中 将 该 图 层 元 素 移 至 合适 的 位 置 ， 
自动 生成 直线 运动 路 径 ， 如 图 4-165 所 示 。 将 “时 间 指 示 器 ” 移 至 3 秒 05 帧 的 位 置 ， 在 “合成 ” 
窗口 中 将 该 图 层 元 素 移 至 合适 的 位 置 ， 如 图 4-166 所 示 。 


图 4-165 图 4-166 

并 将 “时 间 指 示 器 ” 移 至 3 秒 20 帧 的 位 置 ， 在 “合成 ”窗口 中 将 该 图 层 元 素 移 至 合适 的 位 置 ， 
如 图 4-167 所 示 。 将 “时 间 指 示 器 ” 移 至 4 秒 20 帧 的 位 置 ， 在 “合成 ”窗口 中 将 该 图 层 元 素 移 
合适 的 位 置 ， 如 图 4-168 所 示 。 


EA 图 4-168 

TB 将 “时 间 指 示 器 ” 移 至 5 秒 10 帧 的 位 置 ， 在 “合成 ”窗口 中 将 该 图 层 元 素 移 至 合适 的 位 置 ， 
如 图 4-169 所 示 。 将 “时 间 指 示 器 ” 移 至 6 秒 15 帧 的 位 置 ， 在 “合成 ”窗口 中 将 该 图 层 元 素 移 
合适 的 位 置 ， 如 图 4-170 所 示 。 


加 


图 i ! | 图 4.170 
本 这 样 就 已 经 完成 了 该 元 素 位 置 移动 动画 的 制作 ，“ 时 间 轴 ”面板 如 图 4-171 所 示 。 
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图 4-171 


了 0) 使 用 "转换 “顶点 ' 工具 ”, 在 元 素 运 动 


路 径 的 锚 点 上 单 


如 图 4-172 所 示 。 拖 动 方向 线 ， 调 整 运动 路 径 


半 
为 合适 的 曲线 运动 路 径 效 果 ， 如 


图 4-172 


图 4-173 


f 拖 动 , 可 以 显示 


锚 点 的 方向 线 ， 
图 4-173 所 示 。 


运动 路 径 的 调整 过 程 中 , 除了 可 以 使 用 “转换 “ 
拖 动 调整 锚 点 的 位 置 ， 从 而 使 运动 路 径 曲线 更 加 平滑 


顶点 ”工具 ” 拖 出 锚 点 的 方向 线 , 还 可 以 结合 使 用 “选取 工具 ” 


了 在 “时 间 轴 ”面板 中 拖 动 鼠标 同时 选中 


右 击 ， 在 弹出 的 菜单 中 选择 “漂浮 穿梭 时 间 ” 命 令 ， 如 图 4-175 所 示 。 


“位 置 ”属性 中 间 的 所 有 关键 帧 ， 如 图 4-174 所 示 。 


图 4-174 


图 4-175 


上 的 位 置 ， 外 而 娩 所 效 中 的 关键 帧 之 间 


只 需要 为 其 有 


时 穿梭 时 间 ” 的 作用 是 根据 所 选择 的 关键 帧 最 近 的 前 后 两 个 关键 帧 的 位 置 ， 


得 非常 平滑 的 位 置 
的 过 程 中 , 只 需要 确定 起 始 关键 帧 和 结束 关键 帧 , 而 起 始 关 键 帧 与 结束 关键 帧 之 间 的 关键 帧 时 间 位 置 并 不 需要 太 在 意 ， 
“漂浮 穿梭 时 间 ”， 即 可 获得 平滑 的 位 置 变化 速率 


变化 速率 。 简 单 地 理解 ， 


移 


自动 调整 所 选择 关键 帧 在 时 间 
是 我 们 在 制作 位 


动画 


妈 4-176 所 示 。 选 择 43202.png 图 层 ， 执 行 “ 


图 层 ”> “变换 ”> “自动 方向 ”命令 
各 "对话 框 ， 设 置 “ 自 动 方向 ”选项 为 “沿路 径 定向 ”， 如 图 4-177 所 示 。 


总 应 用 “漂浮 穿梭 时 间 ” 命 令 后 ， 可 以 看 到 相应 的 关键 帧 变 成 了 实心 圆 形 的 袍 


， 弹 出 
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图 4-176 图 4-177 

了 单 击 “ 确 定 ”按钮 ， 完 成 “自动 方向 ”对 话 框 的 设置 。 此 时 ， 拖 动 “ 时 间 指 示 器 ” 和 

到 元 素 沿 曲线 路 径 运动 的 效果 ， 如 图 4-178 所 示 。 如 果 元 素 的 方向 不 合适 ， 可 以 使 用 “旋转 工 
对 元 素 进行 旋转 ， 调 整 元 素 的 角度 适合 曲线 运动 的 方向 ， 如 图 4-179 所 示 。 


图 4-178 图 4-179 
驶 完成 该 魔法 飞行 动 效 的 制作 ， 执 行 “文件 ” >“ 保存 ”命令 ， 弹 出 “另存 为 ”对 话 框 ， 将 该 
文件 进行 保存 。 单 击 “ 预 览 ”面板 上 的 “播放 /停止 ” 按 色 圈 ， 可 以 在 “合成 ”窗口 中 预览 动画 效果 ， 
如 图 4-180 所 示 。 


蒙 版 主要 用 来 制作 背景 的 铂 空 透明 和 图 像 之 问 的 平滑 过 渡 等 。 蒙 版 有 多 种 形状 ， 在 After Effects 
人 可 以 利用 相关 的 蒙 版 工具 来 创建 ， 如 矩形、 椭圆 形 和 自由 形状 的 蒙 版 工具 。 本 节 将 详 
细 介 绍 蒙 版 动画 的 相关 知识 和 操作 方法 。 


证 


Ys me an 
蒙 版 动画 原理 
蒙 版 就 是 通过 蒙 版 层 中 的 图 形 或 轮廓 对 象 ， 透 出 下 面 图 层 中 的 内 容 。 通 俗 一 点 说 ， 蒙 版 就 像 是 
上 面 控 了 一 个 洞 的 一 张 纸 ， 而 蒙 版 图 像 就 是 透 过 蒙 版 层 上 面 的 洞 所 观察 到 的 事物 。 就 像 一 个 人 拿 着 
一 个 望远镜 向 远 处 上 晃 望 ， 在 这 里 ， 望 远 镜 就 可 以 看 成 蒙 版 层 ， 而 看 到 的 事物 就 是 蒙 版 层 下 方 的 图 像 。 
一 般 来 说 ， 蒙 版 需要 两 个 层 ， 而 在 After Effects 软件 中 ， 可 以 在 一 个 素材 图 层 上 绘制 形状 轮廓 
从 而 制作 蒙 版 , 看 上 去 像 是 一 个 层 , 但 读者 可 以 将 其 理解 为 两 个 图 层 : 一 个 为 形状 轮廓 层 , 即 蒙 版 层 
一 个 是 被 蒙 版 屋 ， 即 蒙 版 下 的 素材 层 。 
蒙 版 层 的 轮廓 形状 决定 着 看 到 的 图 像 形状 ， 而 被 蒙 版 层 决定 着 看 到 的 内 容 。 当 为 某 个 对 象 创建 
蒙 版 后 ， 位 于 蒙 版 范围 内 的 区 域 是 可 以 被 显示 的 ， 而 位 于 蒙 版 范围 以 外 的 区 域 将 不 被 显示 ， 因 此 ， 
蒙 版 的 轮廓 形状 和 范围 也 就 决定 了 所 看 到 的 图 像 的 形状 和 范围 ， 如 图 4-181 所 示 。 


Hard Out Here 


图 4-181 


而 闭合 路 径 是 连续 的 ， 没有 开 | 


蒙 版 动画 可 以 理解 为 一 个 人 拿 着 望远镜 上 晃 望 远方 ， 在 姚 望 时 不 停 地 移动 望远镜 ， 看 到 的 内 容 就 


会 有 不 同 的 变化 ， 这 样 就 形成 了 蒙 版 动画 效果 。 当 然 也 可 以 理解 为 望远镜 静止 不 动 ， 而 看 到 的 画面 
在 不 停 地 移动 ， 即 被 蒙 版 层 不 停 地 运动 ， 以 此 来 产生 蒙 版 动画 效果 。 


在 After Effects 软件 中 ， 使 用 形状 工具 既 可 以 创建 形状 图 层 ， 也 可 以 创建 形状 庶 淖 。 形 状 
工具 包括 “矩形 工具 ”“ 圆 角 矩 形 工具 ”“ 椭 圆 工具 ”“ 多 边 形 工具 ”和 “ 星 形 工具 ”， 如 医 
4-182 所 示 。 

如 果 当 前 选择 的 是 形状 图 层 ， 则 在 工具 栏 中 单 击 选择 一 个 形状 工具 之 后 ， 在 工具 栏 的 右 侧 会 出 
钢 创 建 形状 或 遮 罩 的 选择 按钮 ， 分 别 是 “工具 创建 形状 ”按钮 圈 和 “工具 创建 蒙 版 ”按钮 圈 ， 刀 
4-183 所 示 。 


FT mw 工人 记 二 


图 4-182 图 4-183 


After Effects CC 移动 网 站 UI 交互 动 效 设计 全 程 揭秘 


注意 ， 在 没有 选择 任何 图 层 的 情况 下 ， 使 用 形状 工具 在 “合成 ”窗口 中 进行 绘制 ， 可 以 绘制 出 
形状 图 形 并 得 到 相应 的 形状 图 层 ， 而 不 是 庶 淖 ， 如 果 选 择 的 图 层 是 形状 图 层 ， 那 么 可 以 使 用 形状 工 
具 创 建 图 形 或 者 是 为 当前 所 选择 的 形状 图 层 创建 遮 暂 ; 如 果 选 择 的 图 层 是 素材 图 层 或 者 是 纯色 图 层 ， 
那么 使 用 形状 工具 时 只 能 为 当前 所 选择 的 图 层 创建 遮 罩 。 


钢笔 工具 
使 用 “钢笔 工具 ”可 以 在 “合成 ”窗口 中 绘制 出 各 种 不 规则 的 路 径 ， 它 包含 4 个 辅助 工具 ， 分 
别 是 “添加 “顶点 工具”“ 删 除 “ 顶 点 ”工具 ”“ 转 换 “ 顶 点 ”工具 ”和 “ 蒙 版 羽化 工具 ”， 妇 
图 4-184 所 示 。 


在 工具 栏 中 选择 “钢笔 工具 ”之 后 ， 在 工具 栏 的 右 侧 会 出 现 一 个 RotoBezier 复 选 框 ， 如 图 
4-185 所 示 。 


图 4-184 图 4-185 
在 默认 情况 下 ， 没 有 勾 选 RotoBezier 复 选 框 ， 这 时 使 用 “钢笔 工具 ”绘制 的 贝 塞 尔 曲线 的 顶点 
包含 有 控制 手柄 ， 可 以 通过 调整 控制 手柄 的 位 置 来 调整 贝 塞 尔 曲线 的 形状 。 如 果 勾 选 RotoBezier 复 
选 框 ， 那 么 绘制 出 来 的 贝 塞 尔 曲线 将 不 包含 控制 手柄 ， 曲 线 的 项 点 曲率 是 After Effects 软件 自动 计算 
得 出 的 。 


After Effects 软件 中 的 形状 工具 和 钢笔 工具 ， 与 Photoshop 和 Illustrator 软件 中 的 形状 工具 和 钢笔 工具 的 使 用 方法 
基本 是 相同 的 ， 在 这 里 就 不 再 过 多 介绍 。 下 面 重点 介绍 如 何 使 用 形状 工具 和 钢笔 工具 创建 莹 版， 以 及 蒙 版 动画 的 制 
作 方 法 。 


创建 蒙 版 © 
在 前 面 几 节 内 容 中 ， 已 经 向 读者 介绍 了 After Effects 中 的 形状 工具 和 钢笔 工具 ， 通 过 使 用 这 些 
工具 都 可 以 在 After Effects 中 创建 蒙 版 ， 除 此 之 外 ， 还 可 以 使 用 “新 建 蒙 版 ”菜单 命令 来 创建 蒙 版。 


实例 10 一 为 素材 图 层 创 建生 版 个) 


源 文件 : 源 文件 \ 第 4 章 M-4-4.aep ”视频 : 视频 \ 第 4 章 M-4-4.mp4 

茎 在 After Effects 中 新 建 一 个 空白 的 项 目 ， 执 行 “ 合 成 ”> “新建 合 成 ”命令 ， 
弹出 “合成 设置 " 对 话 框 , 对 相关 选项 进行 设置 , 如 图 4-186 所 示 。 单 击 “确定 " 按钮 ， 
新 建 合 成 ， 在 “合成 ”窗口 中 可 以 看 到 合成 背景 的 效果 ， 如 图 4-187 所 示 。 

到 执行 "文件 " > "导入 " > "文件" 命令 , 弹出 “导入 文件 " 对 话 框 , 选择 需要 导入 的 素材 文件 ， 
如 图 4-188 所 示 。 单 击 “导入 ”按钮 ， 将 所 选中 的 素材 导入 “项 目 ” 面 板 中 ， 如 图 4-189 所 示 。 
天 在 “项目 "面板 中 将 素材 44401jpg 拖 入 “时 间 轴 ”面板 中 ， 如 图 4-190 所 示 。 在 “时 间 轴 ” 
板 中 选中 需要 添加 蒙 版 的 图 层 ， 如 图 4-191 所 示 。 
天 使 用 “椭圆 工具 " ,在 “合成 " 窗口 中 合适 的 位 置 绘制 一 个 正 圆 形 , 即 为 该 图 层 创建 圆 形 蒙 版 ， 
如 图 4-192 所 示 。 在 “时 间 轴 ”面板 上 可 以 看 到 所 选择 图 层 下 方 自动 出 现 蒙 版 选项 , 如 图 4-193 所 示 。 


图 4-186 


图 4-188 图 4-189 


图 4-190 图 4-191 


图 4-192 图 4-193 


After Effects CC 移动 网 站 UI 交互 动 效 设计 全 程 揭秘 


在 After Effect 中 创建 莹 版 时 ， 首 先 需要 选中 要 创建 蒙 版 的 图 层 ， 然 后 再 使 用 绘 
版 形状 ， 即 可 为 选中 的 图 层 创建 莹 版。 如果 在 创建 蒙 版 时 没有 选中 任何 图 
状 图 形 ， 在 “时 间 轴 ”面板 中 也 会 新 增 该 图 形 的 形状 图 层 ， 而 不 会 创建 任 伺 


图 工具 在 “合成 ”窗口 中 绘制 蒙 
则 在 “合成 ”窗口 中 将 直接 绘制 出 形 


要 创建 蒙 版 的 图 
在 使 用 “椭圆 工 
击 点 为 中 心 向 外 名 


的 “和 矩形 工具 ”按钮 ， 可 以 快速 创建 一 个 与 所 选择 区 
版 时 , 如 果 按 住 Shift 键 , 可 以 创建 一 个 正 圆 形 蒙 版 ; 如 


设置 蒙 版 属性 

完成 图 层 蒙 版 的 添加 后 ， 在 “时 间 轴 ”面板 中 展开 该 图 层 下 方 的 蒙 版 选项 ， 可 以 看 到 用 于 对 蒙 
版 进行 设置 的 各 种 属性 ， 如 图 4-194 所 示 。 通 过 这 些 属性 可 以 对 该 图 层 蒙 版 效果 进行 设置 ， 并 且 还 
可 以 通过 为 蒙 版 属性 添加 关键 帧 ， 从 而 制作 出 相应 的 蒙 版 动画 效果 。 


图 4-194 


2. 蒙 版 路 径 。  》 


该 选项 用 于 设置 蒙 版 的 路 径 范围 ， 也 可 以 为 蒙 版 节点 制作 关键 帧 动画 。 单 击 该 属性 右 侧 的 “ 


SS 


状 …” 文 字 ， 弹 出 “ 蒙 版 形状 ”对 话 框 ， 在 该 对 话 框 中 可 以 对 蒙 版 的 定 界 框 和 形状 进行 设置 ， 如 区 
4-196 所 示 。 


名 


在 “ 定 界 框 " 选项 组 中 , 通过 修改 项 部 、 左 侧 、 右 侧 和 底部 选项 的 参数 , 可 以 修改 当前 蒙 版 的 大 小 


形 ， 如 图 4-197 所 示 。 


en 


在 “形状 ”选项 组 中 ， 可 以 将 当前 的 蒙 版 形状 快速 修改 为 矩形 或 椭 


图 4-196 图 4-197 


该 选项 用 于 设置 蒙 版 羽化 的 效果 ， 可 以 通过 羽化 蒙 版 得 到 更 自然 的 融合 效果 ， 并 且 水 平和 垂直 


方向 可 以 设置 不 同 的 羽化 值 ， 单 击 该 选项 后 的 “约束 比例 ”按钮 ， 可 以 锁定 或 解除 水 平和 垂直 方向 


的 约束 比例 。 如 图 4-198 所 示 为 设置 “ 蒙 版 羽化 ”的 效果 。 
4. 蒙 版 不 透明 度 


该 选项 用 于 设置 蒙 版 的 不 透明 度 ， 如 图 4-199 所 示 设 置 “ 蒙 版 不 透明 度 ”为 50% 的 效果 。 


图 4-198 图 4-199 


5. 蒙 版 扩展 


该 选项 可 以 设置 蒙 版 图 形 的 扩展 程度 ， 如 果 设 置 “ 蒙 版 扩展 ”属性 值 为 正 值 ， 则 扩展 蒙 版 


区 域 ， 


如 图 4-200 所 示 ; 如 果 设 置 “ 蒙 版 扩展 ”属性 值 为 负 值 ， 则 收缩 蒙 版 区 域 ， 如 图 4-201 所 示 。 


实例 11 一 一 制作 蒙 版 属性 动 效 


源 文件 : 源 文件 \ 第 4 章 M-4-5.aep 视频: 视频 \ 第 4 章 M-4-5.mp4 

现在 After Effects 中 新 建 一 个 空白 的 项 目 ， 接 着 上 一 节 中 的 实例 继续 制作 蒙 
版 实现 的 动画 效果 。“ 合 成 ”窗口 效果 如 图 4-202 所 示 ，“ 时 间 轴 ”面板 效果 如 
到 4-203 所 示 。 


图 4-203 

于 在 “时 间 轴 ”面板 中 设置 “ 蒙 版 羽化 ”属性 为 60 像素 ， 颜 色 果 如 图 4-204 所 示 。 确认“ 时 
间 指 示 器 ”位 于 0 秒 位置 ， 为 “ 蒙 版 路 径 ”属性 和 “ 蒙 版 不 透明 度 ” 属 性 分 别 插入 关键 帧 ， 如 
4-205 所 示 。 


图 4-204 图 4-205 
加 将 “时 间 指示 器 ” 移 至 0 秒 12 帧 的 位 置 ， 分 别 单 击 “ 蒙 版 路 径 ” 和 “ 蒙 版 不 透明 度 ”属性 
前 的 “添加 或 移 除 关 键 巾 ”按钮 轿 ， 在 当前 位 置 插入 这 两 个 属性 关键 巾 ， 如 图 4-206 所 示 。 将 “时 
间 指示 器 ” 移 至 0 秒 位 置 ， 在 “合成 ”窗口 中 ， 在 蒙 版 的 形状 路 径 上 双击 ， 则 会 显示 一 个 形状 路 径 
调节 框 ， 如 图 4-207 所 示 。 


OB 将 光标 放置 在 形状 路 径 调节 框 的 其 中 任意 一 个 节点 上 时 ， 光 标 变 成 双向 箭头 效果 ， 按 住 
Shift 键 拖 动 鼠标 ， 将 其 等 比例 缩小 ， 如 图 4-208 所 示 。 并 在 “合成 ”窗口 中 拖 动 该 形状 路 径 ， 将 其 
调整 到 合适 的 位 置 ， 双 击 确认 对 形状 路 径 的 变换 操作 ， 如 图 4-209 所 示 。 在 “时 间 轴 ”面板 中 将 “ 蒙 
版 不 透明 度 ”属性 值 设置 为 0%。 


图 4-208 图 4-209 


| 使 用 “选取 工具 ”在 蒙 版 的 形状 路 径 上 双击 ， 形状 路 径 的 调节 框 , 将 光标 移动 至 调节 框 周围 的 任意 
| 将 出 现 旋转 光标 ， 拖 动 鼠 标 即 可 对 整个 蒙 版 的 形状 路 径 进行 旋转 操作 


三 将 “时 间 指示 器 ” 移 至 0 秒 22 帧 的 位 置 ， 在 “合成 ”窗口 中 使 用 “选取 工具 ” 单 击 并 拖 动 
蒙 版 路 径 至 合适 的 位 置 ， 如 图 4-210 所 示 。 自 动 在 当前 位 置 为 “ 蒙 版 路 径 ” 属 性 添加 关键 帧 ， 如 
妈 4-211 所 示 。 


图 4-211 

将 “时 间 指示 器 ” 移 至 1 秒 07 帧 的 位 置 ， 在 “合成 ”窗口 中 移动 蒙 版 路 径 至 合适 的 位 置 ， 
如 图 4-212 所 示 。 将 “时 间 指 示 器 ” 移 至 2 秒 02 帧 的 位 置 ， 在 “合成 ”窗口 中 移动 蒙 版 路 径 至 合 
适 的 位 置 ， 如 图 4-213 所 示 。 


After Effects CC 移动 网 站 UI 交互 动 效 设计 全 程 揭 秘 


六 将 “时 间 指 示 器 ” 移 至 2 秒 12 帧 的 位 置 ， 在 “合成 ”窗口 中 移动 蒙 版 路 径 至 合适 的 位 置 ， 


如 图 4-214 所 示 。 将 “时 间 指 示 器 ” 移 至 2 秒 22 帧 的 位 置 ， 在 “合成 ”窗口 


适 的 位 置 ， 如 图 4-215 所 示 。 


图 4-214 


图 4-215 


pb 移动 蒙 版 路 径 至 合 


“时 间 轴 ”面板 如 图 4-216 所 示 。 将 “时 间 指示 器 ” 移 至 3 秒 10 帧 的 位 置 ， 在 “合成 ” 


窗口 中 将 蒙 版 路 径 等 比例 放大 ， 如 图 4-217 所 示 。 


图 4-216 


图 4-217 


三 在 “时 间 轴 ”面板 中 拖 动 鼠标 同时 选中 “ 蒙 版 路 径 ” 属 性 的 所 有 关键 帧 ， 如 医 
在 关键 帧 上 右 击 ， 在 弹出 的 菜单 中 执行 “关键 帧 辅助 ”> “ 缓 动 ”命令 ， 为 选中 的 关键 帧 应 用 


效果 ， 在 “时 间 轴 ”面板 中 可 以 看 到 相应 蒙 版 属性 中 的 关键 帧 动画 ， 如 恬 


4-219 所 示 。 


图 4-219 


4-218 所 示 。 


M-4-5.aep"”。 单 击 “ 预 览 ” 
如 医 


与 蒙 版 之 间 产 和 


四 无 : 选择 该 选项 ， 当 前 路 径 不 会 起 到 蒙 版 作 


© 
© 


了 0) 完成 蒙 版 属性 动 效 的 


4-220 所 示 。 


当 一 个 


面板 上 的 “播放 /停止 ”按钮 国 ， 可 以 在 “合成 ” 窗口 


图 4-220 


区 PE 莹 版 的 便 加 处 理 D 


旭 层 中 同时 包含 多 个 蒙 版 时 ， 这 时 就 可 以 通过 设置 蒙 版 的 “混合 模式 ”选项 ， 来 使 蒙 版 


三 加 的 效果 ， 如 医 


4-221 所 示 。 


制作 ， 执 行 “ 文 件 >“ 保存” 命令， 将 文件 保存 为 “ 源 文件 \ 第 4 章 


图 4-221 


动画 和 路 径 动画 等 辅助 动画 效果 。 


相 加 : 默认 情况 下 , 蒙 版 使 


可 以 清楚 地 看 到 两 个 蒙 版 以 相 加 的 
相 减 : 如 果 选 择 “ 相 减 ”模式 ， 蒙 


的 是 


“ 相 加 " 模式, 如 果 绘 制 


的 蒙 版 中 有 两 个 或 两 个 以 上 的 路 径 医 


形式 显示 的 效果 ， 如 医 


4-222 所 示 。 


预览 动画 效果 ， 


， 只 作为 路 径 存在 ， 可 以 为 路 径 制 作 描 边 、 光 线 


形 ， 


版 的 显示 将 变 成 铂 空 的 效果 ， 这 与 选择 该 蒙 版 名 称 右 侧 的 “ 反 


转 ” 选 项 所 实现 的 效果 相同 ， 如 医 
PE * 面 ra 


4-223 所 示 。 


After Effects CC 移动 网 站 UI 交互 动 效 设计 全 程 揭 秘 


加 ”交集 : 如 果 选 择 “ 交 集 ” 模 式 ， 则 只 显示 当前 蒙 版 路 径 与 上 面 所 有 蒙 版 的 组 合 结果 相交 的 部 分 ， 
图 4-224 所 示 。 


亮 : “ 变 亮 ” 模式 与 “ 相 加 ”模式 相同 ,对 于 蒙 版 重 到 部 分 的 不 透明 度 采用 不 透明 度 较 高 的 值 ， 


© 


容 半 容 


和 4 一 225 所 示 。 


到 4-224 图 4-225 

加 变 暗 : “ 变 暗 ”模式 对 于 可 视 范 围 区 域 来 说 ， 与 “交集 ”模式 相同 ， 但 是 对 于 蒙 版 重 琶 部 分 的 
不 透明 度 ， 则 采用 不 透明 度 较 低 的 值 ， 如 图 4-226 所 示 。 

加 差 值 : “ 差 值 "模式 是 采取 并 集 减 去 交集 的 方式 ， 也 就 是 说 ， 先 将 所 有 蒙 版 的 组 合 进行 并 集运 算 ， 

然后 再 将 所 有 蒙 版 组 合 的 相交 部 分 进行 相 减 运算 ， 如 图 4-227 所 示 。 


图 4-226 


实例 12 一 一 制作 扫描 二 维 码 动 效 ) 


源 文件 : 源 文件 \ 第 4 章 M-4-6.aep 视频: 视频 \ 第 4 章 M-4-6.mp4 

了 在 After Effects 中 新 建 一 个 空白 的 项 目 , 执行“ 合成 ” >“ 新 建 合 成 "命令 ， 发 Td ee: 
弹出 “合成 设置 " 对 话 框 , 对 相关 选项 进行 设置 , 如 图 4-228 所 示 。 单 击 “确定 " 按钮 ， 回 时 S 芭 站 
新 建 合成 。 执 行 “ 文 件 ”>“ 导 入 ”> “文件 ”命令 ， 在 弹出 的 “导入 文件 ”对 话 框 中 同时 选中 多 个 
需要 导入 的 素材 文件 ， 如 图 4-229 所 示 。 

加 单 击 “ 导 入 ”按钮 ， 将 所 选中 的 素材 导入 “项 目 ” 面 板 中 ， 如 图 4-230 所 示 。 在 “项 目 ” 
面板 中 将 素材 44601jpg 和 44602.png 分 别 拖 入 “时 间 轴 ”面板 中 ， 在 “合成 ”窗口 中 调整 二 维 码 医 
像 到 合适 的 位 置 ， 如 图 4-231 所 示 。 


图 4-227 


了 EB 不 要 选中 任何 对 象 , 使 用 "矩形 工具 ”, 在 工具 栏 中 设置 “填充 " 为 无 ，" 描 边 " 为 黑色 ， " 描 
边 粗细 ”为 4px, 在 “合成 ”窗口 中 按 住 Shit 键 绘制 一 个 正方 形 ,如 图 4-232 所 示 。 在 “形状 图 层 1 


的 “内 容 ”选项 后 单 击 “ 添 加 ”按钮 ， 在 弹出 的 菜单 中 选择 “修剪 路 径 ”选项 ， 如 图 4_233 所 示 。 

双 展开 “修剪 路 径 1” 选 项 ， 对 相关 选项 进行 设置 ， 效 果 如 图 4-234 所 示 。 选 择 “ 形 状 图 层 
1”， 按 快捷 键 Col+C 复制 该 图 层 ， 按 快捷 键 Cl+V 粘贴 图 层 得 到 “形状 图 层 2”， 展 开 “ 变 换 ” 选 
项 ,设置 “旋转 ”属性 为 90?， 效 果 如 图 4-235 所 示 。 
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了 使 用 相同 的 制作 方法 ， 可 以 将 该 形状 图 层 再 复制 两 次 并 分 别 设置 “旋转 ”属性 ， 效 果 如 医 
4-236 所 示 。 在 “时 间 轴 ”面板 中 将 不 需要 制作 动画 的 图 层 锁定 ， 如 图 4-237 所 示 。 
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图 4-236 图 4-237 

有 RB 使 用 “矩形 工具 ”， 在 工具 栏 中 设置 “填充 ”为 任意 颜色 ，“ 描 边 ” 为 无 ， 在 “合成 ” 窗 
口中 绘制 一 个 矩形 ， 如 图 4-238 所 示 。 复制 “形状 图 层 5" 图 层 , 按 快捷 键 Ctt+V， 粘 贴图 层 得 到 “ 形 
状 图 层 6” 图 层 ， 如 图 4-239 所 示 。 
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到 4-238 | 图 4-239 

6” 图 层 隐 藏 ， 选 择 “ 形 状 图 层 5” 图 层 ， 使 用 “和 托 形 工具 ”， 在 工具 栏 中 单 
出 的 “填充 选项 ”对 话 框 中 选择 “线性 渐变 ”选项 ,如 图 4-240 所 示 。 单 击 “ 确 
图 层 5” 的 “内 容 ” 选 项 中 的 “渐变 填充 1” 选 项 ， 如 图 4-241 所 示 。 


葬 将 “形状 
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Bl 


帮 


站 


0:00:00:00 


图 4-240 | 图 4-241 
三 在 “渐变 填充 1” 选项 中 设置 “结束 点 ”选项 ， 在 “合成 ”窗口 中 使 用 “旋转 工具 ”对 该 
矩形 进行 旋转 操作 ， 效 果 如 图 4-242 所 示 。 单 击 “ 颜 色 ” 选 项 后 的 “编辑 渐变 ”链接 ， 弹 出 “渐变 
编辑 器 ”对 话 框 ， 设 置 渐变 颜色 ， 如 图 4-243 所 示 。 


[3 


图 4-242 下 4-243 


了 单 击 “确定 " 按钮 ,完成 渐变 颜色 的 设置 , 设置 “渐变 填充 1” 选项 中 “起 始点 " 和 “结束 点 ” 
选项 ， 如 图 4-244 所 示 。 在 “合成 ”窗口 中 可 以 看 到 渐变 填充 的 效果 ， 如 图 4-245 所 示 。 


扫描 二 维 码 ， 关 注 我 们 


图 4-244 图 4-245 
0 选择 “形状 图 层 5”， 使 用 “选择 工具 ”在 “合成 ”窗口 中 将 矩形 缩小 ， 如 图 4-246 所 示 。 
在 “时 间 轴 ”面板 中 设置 “形状 图 层 5” 的 “轨道 庶 曾 ”属性 为 “Alpha 遮 站 ”， 按 快捷 键 P， 显 示 
出 该 图 导 的 “位 置 ”属性 ， 如 图 4-247 所 示 。 


扫 撕 二 纵 码 , 关注 我 们 
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图 4-246 图 4-247 
在 “合成 ”窗口 中 将 渐变 矩形 向 上 移 至 合适 的 位 置 ， 为 “位 置 ”属性 插入 关键 帆 ， 如 区 
4-248 所 示 。 将 “时 间 指 示 器 ” 移 至 2 秒 位 置 ， 在 “合成 ”窗口 中 将 渐变 矩形 向 下 移 至 合适 的 位 置 ， 
妈 4-249 所 示 。 
五 同时 选中 刚 创建 的 两 个 位 置 关 键 帧 ， 在 关键 帧 上 右 击 ， 在 弹出 的 菜单 中 执行 “关键 帧 畏 
助 ”>“ 缓 动 ”命令 ， 为 选中 的 两 个 关键 帧 应 用 “ 缓 动 ”效果 ， 如 图 4-250 所 示 。 在 “项 目 ” 面 板 
上 的 合成 上 右 击 ， 在 弹出 的 菜单 中 选择 “合成 设置 ”命令 ， 弹 出 “合成 设置 ”对 话 框 ， 修 改 “ 持 续 
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时 间 ” 为 4 秒 ， 如 图 4-251 所 示 。 


图 4-248 


图 4-249 
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了 单 击 “ 确 定 ”按钮 ， 完 成 “合成 设置 ”对 话 框 的 设置 ，“ 时 间 轴 ”面板 如 图 4-252 所 示 。 


玛 完成 该 扫描 二 维 码 动 效 的 制作 ， 单 击 “ 预 览 ” 面 板 上 的 “播放 /停止 ”按钮 国 ， 可 以 在 “ 合 
成 ”窗口 中 预览 动画 效果 ， 如 图 4-253 所 示 。 


扫描 二 维 码 ， 关 注 我 们 


图 4-253 


在 After Effects 中 演 染 输出 动画 2 


在 交互 动 效 的 制作 过 程 中 ， 泻 染 是 制作 完成 的 最 后 一 个 步骤 ， 也 是 非常 关键 的 一 步 。 在 After 
Effects 中 ， 可 以 将 合成 项 目 泻 染 输出 成 视频 文件 或 序列 图 片 等 ， 由 于 演 染 的 格式 影响 着 影片 最 终 呈 
现 出 来 的 效果 ， 因 此 即使 前 面 制作 得 再 精妙 ， 不 成 功 的 泻 染 也 会 直接 导致 操作 的 失败 。 如 果 需 要 将 
交互 动 效 输出 为 GIF 格式 的 动画 图 片 ， 则 还 需要 与 Photoshop 软件 相 结 合 。 


当 在 After Effects 中 完成 一 个 项 目 文件 的 制作 时 ， 最 终 都 需要 将 其 演 染 输出 ， 有 时 候 只 需要 将 


影片 中 的 一 部 分 泻 染 输出 ， 而 不 是 整个 工作 区 的 影片 ， 此 时 就 需要 调整 泻 染 工作 区 ， 从 而 将 部 分 动 
画 泻 染 输 出 。 

泻 染 工作 区 位 于 “时 间 轴 " 面板 中 , 由 “工作 区 域 开头 "和 "工作 区 域 结尾 " 两 个 点 来 控制 演 染 区 域 ， 
如 图 4-254 所 示 。 


工作 区 域 开头 工作 区 域 结尾 


友 形 权 图 层 


图 4-254 
调整 泻 染 工作 区 的 方法 有 两 种 ， 一 种 是 通过 手动 调整 泻 染 工作 区 ， 还 有 一 种 是 使 用 快捷 键 调整 
演 染 工作 区 ， 两 种 方法 都 可 以 完成 泻 染 工作 区 的 调整 设置 ， 从 而 演 染 输出 部 分 影片 。 


1. 手动 调整 党 染 工作 区 


手动 调整 泻 染 工 作 区 的 方法 很 简单 ， 只 需要 分 别 拖 动 “ 工 作 区 域 开头 ”图 标 和 “工作 区 域 结尾 ” 
和 标 至 合适 的 位 置 ， 即 可 完成 泻 染 工作 区 的 调整 ， 如 图 4-255 所 示 。 
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如 果 想 要 精确 地 控制 开始 或 结束 工作 区 的 时 间 帧 位 置 ， 首 先 将 “时 间 指 示 器 ”调整 到 相应 的 位 置 ， 然 后 按 住 
Shift 键 的 同时 拖 动 开始 或 结束 工作 区 ， 可 以 吸附 到 “时 间 指 示 器 ”的 位 置 


2. 使 用 快捷 键 调整 泻 染 工作 区 


除了 手动 调整 泻 染 工作 区 外 ， 还 可 以 使 用 快捷 键 进行 调整 ， 操 作 起 来 更 加 方便 快捷 。 

在 “时 间 轴 ”面板 中 ， 将 “时 间 指 示 器 ” 拖 动 至 需要 的 时 间 帧 位 置 ， 按 快捷 键 B， 即 可 调整 “ 工 
作 区 域 开头 ”到 当前 的 位 置 。 
在 “时 间 轴 ”面板 中 ， 将 “时 间 指 示 器 ” 拖 动 至 需要 的 时 间 帧 位 置 ， 按 快捷 键 N， 即 可 调整 “ 工 
作 区 域 结尾 ”到 当前 的 位 置 。 


在 After Effects 中 ， 主 要 是 通过 “ 泻 染 队列 ”面板 来 设置 泻 染 输 出 动画 ， 在 该 面板 中 可 以 控制 
整个 泻 染 进度 ， 整理 各 个 全 成 项 目的 泻 染 顺序 ， 设置 每 个 合成 项 目的 泻 染 质量 、 输 出 格式 和 路 径 等 。 

执行 “合成 ” >“ 添加 到 泻 染 队列 ”命令 ， 或 者 按 快捷 键 Ctrl+M， 即 可 打开 “ 泻 染 队列 ”面板 ， 
如 图 4-256 所 示 。 


已 用 时 间 剩余 时 闻 


图 4-256 


在 “ 泻 染 队列 ”面板 中 某 个 需要 泻 染 输 出 的 合成 下 方 ， 单 击 “ 泻 染 设置 ”选项 右 侧 的 下 三 角 按 
sm 即 可 在 弹出 的 菜单 中 选择 系统 自 带 的 泻 染 预 设 ， 如 图 4-257 所 示 。 


图 4-257 


最 佳 设置 : 选择 该 选项 ， 系 统 会 以 最 好 的 质量 泻 染 当前 动画 ， 该 选项 为 默认 选项 。 

DV 设置 : 选择 该 选项 ， 系 统 会 使 用 DV 模式 设置 进行 项 目 泻 染 。 

多 机 设置 : 选择 该 选项 ， 系 统 将 使 用 多 机 器 泻 染 设置 进行 项 目 演 染 。 

当前 设置 : 选择 该 选项 ， 系 统 会 使 用 在 “合成 ”窗口 中 的 参数 设置 。 

草图 设置 : 选择 该 选项 ， 系 统 将 使 用 草稿 质量 输出 影片 ， 一 般 情 况 下 ， 会 在 测试 观察 时 使 用 。 
自 定义 : 选择 该 选项 , 可 以 弹出 " 泻 染 设置 " 对 话 框 , 在 该 对 话 框 中 用 户 可 以 自 定义 泻 染 设置 选项 ， 
如 图 4-258 所 示 。 
创建 模板 : 选择 该 选项 ， 可 以 弹出 “ 泻 染 设置 模板 ”对 话 框 ， 如 图 4-259 所 示 。 用 户 可 以 自行 
进行 泻 染 模板 的 设置 创建 ， 创 建 的 自 定义 模板 也 会 出 现在 该 弹出 菜单 中 。 
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图 4-258 图 4-259 


在 “ 泻 染 设置 ”选项 右 侧 的 “日 志 ” 选 项 主要 用 于 设置 泻 染 
动画 的 日 志 显示 信息 ， 在 该 下 拉 列 表 中 可 以 选择 日 志 中 需要 记录 
的 信息 类 型 ， 如 图 4-260 所 示 ， 默 认 选 择 “ 仅 错误 ”选项 。 


3. 输出 模块 图 4-260 


在 “ 泻 染 队列 ”面板 中 某 个 需要 泻 染 输 出 的 合成 下 方 ， 单 击 “ 输 出 模块 ”选项 右 侧 的 下 三 角 按 
馈 国 ， 即 可 在 弹出 菜单 中 选择 不 同 的 输出 模块 ， 如 图 4-261 所 示 。 默 认 选 择 “ 无 损 ” 选 项 ， 表 示 所 
泻 染 输出 的 文件 为 无 损 压 缩 的 视频 文件 。 
单 击 “ 输 出 模块 ” 右 侧 的 加 号 按 馈 国 ， 可 以 为 该 合成 添加 一 个 输出 模块 ， 如 图 4-262 所 示 ， 即 
可 添加 一 种 输出 的 文件 格式 。 


图 4-261 图 4-262 
如 果 需 要 删除 某 种 输出 格式 ， 可 以 单 击 该 “输出 模块 ” 右 侧 的 减 号 按钮 于， 需要 注意 的 是 ， 必 
须 保留 至 少 一 个 输出 模块 。 
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4. 输出 到 


在 “ 演 染 队列 ”面板 中 某 个 需要 演 染 
站 “输出 到 ” 选项 主 


于 设置 该 合成 泻 染 输出 的 文件 位 置 和 名 称 。 ~ = 国 SE, 

单 击 “ 输 出 到 ”选项 右 侧 的 下 三 角 按 后 时 ， Se 
即 可 在 弹出 菜单 中 选择 预 设 的 输出 名 称 格 ee 
式 ， 如 图 4-263 所 示 。 合成 名称 和 RR 二 


生成 和 帧 围 
合成 名 称 和 日期 /时 间 
让 定义 


图 4-263 


在 “ 泻 染 队列 ”面板 中 完成 泻 染 队列 
中 合成 下 方 相关 泻 染 选项 的 设置 后 ， 单 击 “ 泻 染 队列 ”面板 右 侧 的 “渲染 ”按钮 ， 即 可 按照 设置 对 
泻 染 队列 中 合成 进行 泻 染 输出 ， 并 显示 泻 染 进度 ， 如 图 4-264 所 示 。 


已 用 时 间 : 0 剩余 时 则 


图 4-264 
在 After Effects 中 ， 当 一 个 动画 文件 制作 完成 后 ， 就 需要 将 最 终 的 结果 输出 ， 以 供 开 发 人 员 更 
好 地 理解 交互 设计 作品 效果 。After Effects 中 提供 了 多 种 输出 的 方式 ， 但 是 相对 于 交互 动画 来 说 最 适 
宜 的 一 种 格式 就 是 QuickTime 格式 的 视频 文件 。 其 原因 是 便于 之 后 导入 Photoshop 中 再 输出 GIF 格 
式 的 动画 文件 。 


实例 13 一 一 将 动 效 泻 染 输出 为 视频 文件 。 “| 


源 文件 ， 源 文件 \ 第 4 章 M-5-3.mov ”视频 : 视频 \ 第 4 章 M-5-3.mp4 
0 打开 After Effects， 执 行 “ 文 件 ” > “打开 项 目 ” 命 令 ， 弹 出 “打开 ”对 话 


框 ， 选 择 之 前 制作 好 的 4-4-5.aep 文件 ， 如 图 4-265 所 示 。 单 击 “ 打 开 ” 按 钮 ， 在 
After Effects 中 打开 该 项 目 文件 ， 如 图 4-266 所 示 。 
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图 4-265 图 4- 66 

有 执行 “合成 ” >“ 添加 到 演 染 队列 ”命令 ， 将 该 动画 中 的 合成 添加 到 “ 演 染 队列 ”面板 中 ， 
如 图 4-267 所 示 。 单 击 “ 输 出 模块 ”选项 后 的 “无 损 ” 文字 , 弹出 “输出 模块 设置 ”对 话 框 , 设置 “ 格 
式 ” 选 项 为 QuickTime， 其 他 选项 采用 默认 设置 ， 如 图 4-268 所 示 。 


区 到 


图 4-267 


全 单 击 “ 确 定 ” 按 钮 ， 完 成 “输出 模块 设置 ”对 话 框 的 设置 ， 单 才 


图 4-268 


弹出 “将 影片 输出 到 ”对 话 框 ， 设 置 输出 文件 的 名 称 和 位 置 ， 如 区 
完成 该 合成 相关 输出 选项 的 设置 ， 如 图 4-270 所 示 。 


图 4-269 


表单 击 “ 泻 染 队列 ”面板 右上 角 的 “ 泻 染 ”按钮 ， 即 可 按照 当前 的 演 染 输 
， 输 出 完成 后 在 选择 的 输出 位 置 可 以 看 到 所 输出 的 4-5-3.mov 文件 ， 如 医 


输出 操 人 


二 “输出 到 ”选项 后 的 文字 ， 


4-269 所 示 。 单 击 “ 保 存 ” 按 钮 ， 


图 4-270 


时 设置 对 合成 进行 


击 所 输出 的 视频 文件 ， 即 可 在 视频 播放 器 中 看 到 所 制作 的 动画 效果 ， 如 图 4-272 所 示 。 


4-271 所 示 。 双 
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于 光量 配合 Photoshop 输出 ,GIF 文件 一 全 
演 染 与 输出 往往 是 制作 影视 作品 的 最 后 一 步 ， 但 是 在 交互 动 效 中 往往 还 需要 将 动 效 输出 为 
GIF 格式 的 动画 文件 ， 但 是 在 After Effects 中 无 法 直接 输出 GIF 格式 的 动画 文件 ， 这 时 就 需要 配合 
Photoshop 来 输出 相应 的 GIF 格式 动画 文件 。 可 以 先 在 After Effects 中 输出 MOV 格式 的 视频 文件 ， 
将 所 输出 的 MOV 格式 视频 导入 Photoshop 中 ， 利 用 Photoshop 来 输出 GIF 格式 动画 文件 。 


实例 14 一 一 将 动 效 输出 为 GIF 动画 图 片 OO 


源 文件 : 源 文件 \ 第 4 章 M-5-4.gf ”视频 视频 \ 第 4 章 M-5-4.mp4 

打开 Photoshop, 执行 "文件" > “导入 "> “视频 帧 到 图 层 " 命令 , 弹出“ 
开 ” 对 话 框 ， 选 择 上 一 节 导 出 的 视频 文件 4-5-3.mov， 如 图 4-273 所 示 。 单 击 “ 打 
”按钮 ， 弹 出 “将 视频 导入 图 层 ” 对 话 框 ， 如 图 4-274 所 示 。 
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图 4-273 图 4-274 
玛 默认 设置 , 单 击 “确定 " 按钮 , 完成 视频 文件 的 导入 , 自动 将 视频 中 的 每 一 帧 画面 放 入 “时 
间 轴 ”面板 中 , 如 图 4-275 所 示 。 执行 “文件 ” >“ 导 出 ”> “存储 为 Web 所 用 格式 ”命令 ， 弹 出 “ 存 


储 为 Web 所 用 格式 ”对 话 框 ， 如 图 4-276 所 示 。 


图 4-275 图 4-276 
天 在 “存储 为 Web 所 用 格式 ”对 话 框 中 的 右上 角 选 择 格式 为 GIF， 在 右 下 角 的 “动画 ” 选 
项 区 中 设置 “循环 选项 ”为 “永远 ”， 还 可 以 单 击 播放 按钮 ， 预 览 动画 播放 效果 ， 如 图 4-277 所 
示 。 单 击 “ 存 储 ” 按钮 ， 弹 出 “将 优化 结果 存储 为 ”对 话 框 ， 选 择 保存 位 置 和 保存 文件 名 称 ， 如 
4-278 所 示 。 
了 本 单 击 ' 保 存 "按钮 , 即 可 完成 GIF 格式 动画 文件 的 输出 , 在 输出 位 置 , 可 以 看 到 输出 的 GIF 文件， 
如 图 4-279 所 示 。 在 浏览 器 中 预览 该 GIF 动画 文件 ， 可 以 预览 该 动画 效果 ， 如 图 4-280 所 示 。 
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图 4-279 图 4-280 


将 动画 嵌入 手机 模板 


在 网 络 中 , 我 们 常常 看 到 将 动 效 嵌入 手机 模板 的 不 规则 动画 效果 ， 这 样 的 效果 是 如 何 实现 的 呢 ? 
其 实 这 样 的 效果 在 After Effects 和 Photoshop 中 都 可 以 实现 ， 如 果 是 在 After Effects 中 ， 则 可 以 通过 
为 合成 添加 “ 边 角 固定 ”效果 ， 从 而 对 该 合成 进行 调整 ， 得 到 需要 的 效果 ， 如 果 是 在 Photoshop 中 ， 
则 可 以 将 动画 先 输出 为 GIF 动画 文件 ， 再 通过 Photoshop 将 该 GIF 动画 创建 为 智能 对 象 ， 将 该 智能 
对 象 嵌 入 手机 模板 中 就 可 以 了 。 


实例 15 一 将 动画 效果 嵌入 手机 模板 中 (外) 


源 文件 ， 源 文件 \ 第 4 章 M4-5-5.gf ”视频 : 视频 \ 第 4 章 4-5-5.mp4 

芭 打开 After Effects, 执行 “文件 ” >“ 打开 项 目 ” 命令, 打开 项 目 文件 “ 源 文 
件 \ 第 4 章 \4-4-6.aep”,， 效果 如 图 4-281 所 示 。 执行 “合成 ” >“ 添加 到 泻 染 队列 ” 
命令 ， 将 该 动画 中 的 合成 添加 到 “ 演 染 队列 ”面板 中 ， 如 图 4-282 所 示 。 


图 4-281 
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玛 单 击 “ 输 出 模块 ”选项 后 的 “无 损 ” 文字 ， 弹 出 “输出 模块 设置 ”对 话 框 ， 设置 “格式 ” 
选项 为 QuickTime， 其 他 选项 采用 默认 设置 ， 如 图 4-283 所 示 ， 单 击 “ 确 定 ” 按 钮 。 单 击 “ 输 出 到 ” 
选项 后 的 文字 ， 弹 出 “将 影片 输出 到 ”对 话 框 ， 设 置 输出 文件 的 名 称 和 位 置 ， 如 图 4-284 所 示 。 


图 4-283 图 4-284 

有 单 击 “ 保 存 " 按钮 ， 完 成 该 合成 相关 输出 选项 的 设置 ， 如 图 4-285 所 示 。 单 击 “ 泻 染 队 列 ” 
面板 右上 角 的 “ 泻 染 ”按钮 ， 演 染 输 出 视频 文件 4-5-5.mov， 如 图 4-286 所 示 。 
名 打开 Photoshop， 执行 文件” >“ 导 
入 ”>“ 视 频 帧 到 图 层 ”命令 ， 弹 出 “打开 ”对 话 
框 ， 选 择 上 一 节 导 出 的 视频 文件 4-5-5.mov， 如 
始 4-287 所 示 。 单 击 “ 打 开 ” 按 钮 ， 弹 出 “将 视 
频 导 入 图 层 ” 对 话 框 ， 如 图 4-288 所 示 。 
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图 4-286 图 4-287 

了 默认 设置 ， 单 击 “ 确 定 ” 按钮 。 gasses 
完成 视频 文件 的 导入 ， 自 动 将 视频 中 每 sn 国 

一 帧 画面 放 入 “时 间 轴 ”面板 中 ， 如 图 | 0 fmsssm 

4-289 所 示 。 执行 “文件 ” >“ 导出 ”> “ 存 有 

储 为 Web 所 用 格式 ”命令 ,弹出 “存储 

为 Web 所 用 格式 ”对 话 框 ， 如 图 4-290 


苛 市 作 起 动画 办 


06 “存储 ”按钮 ， 弹 出 “将 优 
化 结果 存储 为 ”对 话 框 ， 选 择 保存 位 置 和 
保存 文件 名 称 , 如 图 4-291 所 示 。 单 击 “保存 " 按钮, 即 可 完成 GIF 格式 动画 文件 的 输出 , 在 输出 位 置 ， 
可 以 看 到 输出 的 GIF 文件 ， 如 图 4-292 所 示 。 


图 4-288 
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玛 将 Photoshop 中 的 当前 文件 关闭 ， 不 需要 保存 。 在 Photoshop 中 打开 刚 输 出 的 GIF 格式 翅 


画 文件 4-5-5.gf， 如 图 4-293 所 示 。 在 “时 间 轴 ”面板 菜单 中 执行 “将 帧 拼合 到 图 层 ”命令 ， 如 区 


4-294 所 示 ， 这 样 就 可 以 将 动画 中 的 第 一 帧 都 转换 为 一 个 图 


有 单 击 “ 时 间 轴 ” 


频 时 间 轴 ”按钮 图 引 ， 转 换 为 视频 时 间 轴 面 


图 4-293 


面板 左下 角 的 “转换 为 视 
板 ， 如 


”面板 中 同时 选中 所 有 图 层 ， 


”> “转换 为 智能 对 象 "” 命令 ， 


图 
执行 “图 层 " > “智能 对 象 
层 


和 4 一 296 所 示 。 


图 4-295 


图 4-292 


器 帧 匹配 图 层 … 
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贡 在 Photoshop 中 打开 准备 好 的 素材 手机 图 片 ， 如 图 4-297 所 示 。 将 得 到 的 智能 对 象 图 层 拖 
至 该 手机 素材 图 片 中 , 按 快捷 键 Cl+T, 显示 自由 变换 框 , 将 该 智能 对 象 等 比例 缩小 , 并 进行 扭曲 操作 ， 
使 其 适合 该 手机 素材 ， 如 图 4-298 所 示 。 
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图 4-297 图 4-298 

了 0) 完成 智能 对 象 的 变换 调整 后 ， 单 击 “ 时 间 轴 ”面板 上 的 “创建 视频 时 间 轴 ”按钮 ， 即 可 创 

建 出 视频 时 间 轴 ， 可 以 预览 动画 的 效果 ， 如 图 4-299 所 示 。 执 行 “文件 ”>“ 导 出 ”>“ 存 储 为 Web 
所 用 格式 ”命令 ， 弹 出 “存储 为 Web 所 用 格式 ”对 话 框 ， 如 图 4-300 所 示 。 


图 4-300 


单 击 “存储 ”按钮 ， 即 可 将 其 输出 为 GIF 格式 的 动画 文件 ,在 浏览 器 中 预览 该 GIF 动画 文件 ， 
可 以 预览 该 动画 效果 ， 如 图 4-301 所 示 。 


图 4-301 
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[5.1 甘 按钮 与 图 标 动 效 设计 D 


按钮 和 图 标 都 是 UI 界面 中 最 基础 的 交互 元 素 ， 在 移动 端 UI 界面 中 使 用 的 频率 非常 高 。 用 户 在 
使 用 移动 端 应 用 时 都 是 通过 点 击 相应 的 按钮 图 标 顺 着 设计 师 的 想法 走 下 去 的 ， 如 果 能 够 在 界面 中 合 
理 地 为 按钮 和 图 标 设计 相应 的 动 效 ， 用 户 会 得 到 很 好 的 用 户 体验 。 


-6- 寺 | JT 大 过 础 ©, 
开关 顾名思义 就 是 开启 和 关闭 ， 开 关 按 钮 是 移动 端 界面 中 常见 的 元 素 ， 一 般 用 于 打开 或 关闭 某 
项 功能 。 在 移动 端 操作 系统 中 ， 开 关 按 钮 的 应 用 非常 常见 ， 通 过 开关 按钮 来 打开 或 关闭 应 用 中 的 某 
种 功能 ， 这 样 的 设计 符合 现实 生活 的 经 验 ， 是 一 种 习惯 用 法 。 
移动 端 UI 界面 中 的 开关 按钮 用 于 展示 当前 功能 的 激活 状态 ， 用 户 通过 单 击 或 “滑动 ”可 以 切换 
该 选项 或 功能 的 状态 ， 其 表现 形式 常见 的 有 和 矩 形 和 圆 形 两 种 ， 如 图 5-1 所 示 。 
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在 移动 端 UI 界面 设计 中 ， 常 常 可 以 为 开关 按钮 控件 添加 交互 动态 效果 设计 ， 从 而 当 用 户 进行 操 
作 时 ， 可 以 通过 交互 动 效 的 方式 向 用 户 展示 功能 切换 过 程 ， 给 人 一 种 动态 、 流 畅 的 感觉 。 


OR ere = 


源 文件 : 源 文件 \ 第 5 章 \5-1-2.aep 视频: 视频 \ 第 5 章 \5-1-2.mp4 
在 After Effects 中 新 建 一 个 空白 的 项 目 , 执行 “合成 ” >“ 新建 合成 ”命令 ， TT 
弹出 “合成 设置 ”对 话 框 , 对 相关 选项 进行 设置 ， 如 图 5-2 所 示 。 执行 “图 层 ”> “新 加 党 字 
建 ” >“ 纯色 ”命令 ， 弹 出 “纯色 设置 ” 对 话 杠 ， 设置 如 图 5-3 所 示 。 


图 5-2 

单 击 “确定 ”按钮 ， 创 建 纯色 图 层 ， 先 将 该 图 层 锁定 。 使 用 “ 圆 角 和 矩 具 ”， 在 工具 栏 

中 设置 “填充 "为 #4CF5D，“ 描 边 ” 为 无 , 在 “合成 ”窗口 中 绘制 圆 角 矩形， 如 图 5-4 所 示 。 在 “时 

间 轴 ”面板 中 将 该 图 层 重 命名 为 “开关 背景 ”， 展 开 该 图 层 下 方 “ 和 矩形 1” 选 项 中 的 “ 算 形 路 径 1 
选项 ， 设 置 “ 圆 度 ” 属 性 值 为 50， 效 果 如 图 5-5 所 示 。 


NSN 


加 5-4 图 5-5 

执行 “图 层 ”>“ 图 层 样式 ”>“ 投 影 ” 命令， 为 该 图 层 添加 “投影 ”图 层 样 式 ， 对 相关 选 
项 进行 设置 ， 如 图 5-6 所 示 。 在 “合成 ”窗口 中 可 以 看 到 为 该 圆 角 和 矩形 添 加 县 影 ”图 层 样式 的 效果 ， 
如 图 5-7 所 示 。 
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0) 先 将 该 图 层 锁定 , 使 用 " 椭 具 ”, 在 工具 栏 中 设置 “填充 "为 ，“ 描 边 ” 为 无 , 在 “合成 ” 
窗口 中 按 住 Shift 键 拖 动 鼠标 绘制 正 圆 形 , 调整 该 正 圆 形 到 合适 的 大 小 和 位 置 , 如 图 5-8 所 示 。 在 “时 
间 轴 ”面板 中 将 该 图 层 重 命名 为 “ ， 展 开 该 图 层 的 “变换 ”选项 ， 设 置 “ 不 透明 度 ” 为 70%， 
效果 如 图 5-9 所 示 。 


eh 


图 5-8 图 5-9 

3 使 用 “ 横 排 文字 工具 ”， 在 “合成 ”窗口 中 单 击 并 输入 相应 的 文字 ， 在 “字符 ”面板 中 对 

文字 的 相关 属性 进行 设置 ， 如 图 5-10 所 示 。 使 用 相同 的 制作 方法 ， 在 “合成 ”窗口 中 输入 其 他 文字 ， 
如 图 5-11 所 示 。 


司 团 周 


图 5-11 

8 选择 “ 圆 ” 图 层 , 将“ 时间 指示 器 ” 移 至 0 秒 12 帧 的 位 置 ， 按 快捷 键 P， 显 示 该 图 层 的 “位 
置 ” 属 性 ， 为 该 属性 插入 关键 帧 ， 如 图 5-12 所 示 。 将 “时 间 指 示 器 ” 移 至 1 秒 的 位 置 ， 在 “合成 ” 
窗口 中 将 该 正 圆 形 向 右 移 至 合适 的 位 置 ， 如 图 5-13 所 示 。 


图 5-12 图 5-13 


了 0 将 “时 间 指 示 器 ” 移 至 1 秒 12 帧 的 位 置 ， 单 击 “ 圆 ”图 层 下 方 “ 位 置 ”属性 前 的 “添加 或 
移 除 关键 帧 ”按钮 ， 插 入 该 属性 关键 帧 ， 如 图 5-14 所 示 。 将 “时 间 指 示 器 ” 移 至 2 秒 的 位 置 ， 选 择 
0 秒 12 帧 位 置 上 的 关键 帧 ， 按 快捷 键 Ctrl+C 进行 复制 ， 按 快捷 键 Ctrl+V， 将 其 粘贴 到 2 秒 的 位 置 ， 
如 图 5-15 所 示 。 
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图 5-14 图 5-15 


同时 选中 此 处 的 4 个 关键 帧 , 按 快 捷 键 F9, 为 其 应 用 " 缓 动 " 效果 , 如 图 5-16 所 示 。 单 击 “ 时 
间 轴 ”面板 上 的 “图 表 编 辑 器 ”按钮 图 ， 进 入 图 表 编 辑 器 状态 ， 如 图 5-17 所 示 。 


图 5-16 图 5-17 


单 击 “ 使 所 有 图 表 适 于 查看 ”按钮 图 ， 使 该 部 分 图 表 充 满 整个 面板 ， 如 图 5-18 所 示 。 单 
点 ， 拖 动 方向 线 调整 运动 速度 曲线 ， 如 图 5-19 所 示 。 


线 锚 


到 5-18 图 5-19 

次 单 击 “ 图 表 编 辑 器 ”按钮 图 ， 返 回 到 默认 状态 。 将 “时 间 指 示 器 ” 移 至 0 秒 12 帧 的 位 
置 ， 选 择 “ 开 关 背 景 ”图 层 ， 将 该 图 层 解锁 ， 展 开 该 图 层 下 方 的 “内 容 ” 选 项 中 “矩形 1” 选 项 中 的 
“填充 1” 选 项 ,为 “颜色 ”属性 插入 关键 帧 ， 如 图 5-20 所 示 。 将 “时 间 指 示 器 ” 移 至 1 秒 的 位 置 ， 
修改 "颜色 ”为 #44336， 效 果 如 图 5-21 所 示 。 


图 5-20 图 5-21 


将 “时 间 指 示 器 ” 移 至 1 秒 12 帧 的 位 置 ， 单 击 “ 开 关 背 景 ” 图 层 下 方 “ 颜 色 ” 属 性 前 的 “ 肖 
加 或 移 除 关键 帧 ”按钮 ， 插 入 该 属性 关键 帧 ， 如 图 5-22 所 示 。 将 “时 间 指 示 器 ” 移 至 2 秒 的 位 置 ， 


Eh 
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修改 “颜色 ”为 #04CF5D， 效 果 如 图 5-23 所 示 。 


图 5-22 图 5-23 
选择 ON 文字 图 层 ， 单 击 该 图 层 下 方 “ 文 本 ”选项 “动画 ”选项 后 的 三 角形 按钮 ， 在 弹出 
的 菜单 中 执行 “填充 颜色 ” > RGB 命令 , 为 该 文本 图 层 添加 “填充 颜色 ”属性 , 如 图 5-24 所 示 。 将 "时 
间 指 示 器 ” 移 至 0 秒 12 帧 的 位 置 ， 为 “填充 颜色 ”属性 插入 关键 帧 ， 并 设置 “填充 颜色 ”为 黑色 ， 
如 图 5-25 所 示 。 
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图 5-24 

将 “时 间 指 示 器 ” 移 至 1 秒 的 位 置 , 修改 “填充 颜色 ”为 白色 , 效果 如 图 5-26 所 示 。 将 “时 
间 指 示 器 ” 移 至 1 秒 12 帧 的 位 置 ， 为 该 属性 添加 关键 帧 。 将 “时 间 指 示 器 ” 移 至 2 秒 的 位 置 ， 修 改 
“填充 颜色 ”为 黑色 ， 如 图 5-27 所 示 。 


图 5-26 图 5-27 

根据 ON 文字 图 层 相 同 的 制作 方法 ， 可 以 完成 OFF 文字 图 层 中 动画 的 制作 ， 效 果 如 
妈 5-28 所 示 ，“ 时 间 轴 ”面板 如 图 5-29 所 示 。 
将 最 下 方 的 纯色 图 层 解锁 ， 选 择 该 图 层 ， 执 行 “ 效 果 ”> “颜色 校正 ”> “曝光 度 ” 命 令 ， 
为 该 图 层 应 用 “曝光 度 ” 效 果 ， 如 图 5-30 所 示 。 将 “时 间 指 示 器 ” 移 至 0 秒 12 帧 的 位 置 ， 展 开 
该 图 层 下 方 “ 效 果 ” 选 项 中 “曝光 度 ” 选 项 中 的 “ 主 ” 选 项 ， 为 “曝光 度 ” 属 性 插入 关键 帧 ， 如 
到 5-31 所 示 。 
将 “时 间 指 示 器 ” 移 至 1 秒 的 位 置 ， 修 改 “ 曝 光度 ”为 -3， 效 果 如 图 5-32 所 示 。 将 “时 
间 示 器 ” 移 至 1 秒 12 帧 的 位 置 ， 为 该 属性 添加 关键 帧 ， 将 “时间 指示 器 ” 移 至 2 秒 的 位 置 ， 修 改 
“曝光 度 ” 为 0， 如 图 5-33 所 示 。 
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OR rc == 


图 5-29 


0;00:00:12 9:00:00:12 


ol b2 ea $ 


图 5-30 图 5-31 


图 5-32 ! 图 5-33 
选择 “ 圆 ”图 层 ， 为 该 图 层 开启 “运动 模糊 ”功能 ， 如 图 5-34 所 示 。 完 成 该 开关 按钮 动 
效 的 制作 ， 在 “时 间 轴 ”面板 中 可 以 看 到 各 图 层 中 的 属性 关键 帧 效果 ， 如 图 5-35 所 示 。 


0;00;00:00 


ooea ® 


图 5-34 L 图 5-35 
单 击 “ 预 览 ” 面 板 上 的 “播放 /停止 ”按钮 国 ， 可 以 在 “合成 ”窗口 中 预览 动画 效果 。 也 
可 以 根据 前 面 介绍 的 泻 染 输出 方法 ， 将 该 动画 泻 染 输出 为 视频 文件 ， 再 使 用 Photoshop 将 其 输出 为 
GIF 格式 的 动画 ， 动 画 效果 如 图 5-36 所 示 。 
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图 5-36 


二 图 标 在 UI 界面 中 的 作用 @ 


在 移动 端 界面 设计 中 ， 图 标 设计 占有 很 大 的 比例 ， 想 要 设计 出 良好 的 图 标 ， 首 先 需要 了 解 图 标 


设计 的 应 用 价值 。 


1. 明确 传达 信息 。 ”》 


图 标 在 设计 中 一 般 是 提供 单 击 功能 或 者 与 文字 相 结 合 描述 功能 选项 的 ， 了 解 其 功能 后 要 在 其 易 
辨认 性 上 下 功夫 ， 不 要 将 图 标 设计 得 太 花 哨 ， 否 则 用 户 不 容易 看 出 它 的 功能 。 好 的 图 标 设计 是 只 要 
用 户 看 一 眼 外 形 就 知道 其 功能 ， 并 且 移动 界面 中 所 有 图 标的 风格 需要 统一 ， 如 图 5-37 所 示 。 


SO00 


单身 狗 吃 人 生活 家 明星 控 


使 用 简约 的 图 标 在 移动 App 界面 中 表现 
功能 ， 具 有 很 好 的 识别 性 ， 可 以 起 到 突出 
功能 和 选项 的 作用 


图 标 设计 要 使 移动 端 界 面 的 功能 具象 化 , 更 容易 理解 。 常 见 的 图 标 元 素 本 身 在 生活 中 就 经 常见 到 ， 
这 样 做 的 目的 是 使 用 户 可 以 通过 一 个 常见 的 事物 理解 抽象 的 移动 界面 功能 ， 如 图 5-38 所 示 。 


. 
韩版 女 款 糖 果 色 包 ，59 
元 购买 ! 原价 159 元 ! 
© Rs 
} Ke: PU 


Sos x1 


韩国 MINI 时 尚 手表 ，105 


元 购买 ! 原价 198 元 
) 
O Ee 


简约 象形 图 标 与 文 
字 相 结合 ， 表 现 重 
要 的 选项 和 功能 
通常 都 采用 纯色 来 
|< 一 设计 简约 图 标 


图 5-38 
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3. 娱乐 性 


优秀 的 图 标 设计 ， 可 以 为 移动 端 界 面 增添 动感 。 现 在 ， 界 面 设计 趋向 于 精美 和 细致 。 设 计 精 良 
的 图 标 可 以 让 所 设计 的 移动 端 界 面 在 众多 设计 作品 中 脱颖而出 ， 这 样 的 界面 设计 更 加 连贯 、 富 于 整 
体感 、 交 互 性 更 强 ， 如 图 5-39 所 示 。 


通过 简约 一 > 人 ) 口 电 二 
的 图 形 将 
图 标的 功 
能 表现 得 » 
很 具体 和 
5 全 富国 <% 


八 


图 5-39 


统一 的 图 标 设计 风格 形成 移动 界面 
的 统一 性 ， 代 表 了 移动 应 用 的 基本 功能 
特征 ， 凸 显 了 移动 应 用 的 整体 性 和 整合 
程度 ， 给 人 以 信赖 感 ， 同 时 便于 记忆 ， 
如 图 5-40 所 示 。 


5. 美观 大 方 


标 设计 也 是 一 种 艺术 创作 ， 极 具 
术 美感 的 图 标 能 够 提高 产品 的 品位 ， 
图 标 不 但 要 强调 其 示意 性 ， 还 要 强调 
产品 的 主题 文化 和 品牌 意识 ， 目前 图 
ty 了 前 所 未 有 的 高 度 ， 

5-41 所 示 。 


图 标 动 效 的 常见 表现 方法 @ 
网 在 越 来 越 多 的 手机 应 用 和 Web 应 用 都 开始 注重 图 标的 交互 动态 效果 设计 ， 例 如 手机 在 充电 过 


程 中 电池 图 标的 动画 效果 , 如 图 5-42 所 示 , 以 及 音乐 播放 软件 中 播放 模式 的 改变 等 , 如 图 5-43 所 示 。 
恰到好处 的 交互 动态 效果 可 以 给 用 户 带 来 愉悦 的 交互 体验 。 
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Ep» fs 
图 5-42 图 5-43 
过 去 ， 图 标的 转换 都 十 分 死板 ， 而 近年 来 开始 流行 在 切换 图 标的 时 候 加 入 过 渡 动画 ， 这 种 交互 
动态 效果 能 够 有 效 提高 产品 的 用 户 体验 ， 为 应 用 软件 增色 不 少 。 下 面 介 绍 图 标 动态 效果 的 一 些 表现 
方法 ， 以 便于 在 动态 图 标的 设计 过 程 中 合理 应 用 。 


1. 属性 转换 法 


绝 大 多 数 的 图 标 动画 都 离 不 开 属性 的 变化 , 这 也 是 应 用 最 普遍 、 最 简单 的 一 种 图 标 动画 表现 方法 。 
属性 包含 位 置 、 大 小 、 旋 转 、 透 明度 、 颜 色 等 ， 通 过 这 些 属性 来 制作 图 标的 动画 效果 ， 如 果 能 够 恰 
当地 应 用 ， 同 样 可 以 表现 出 令 人 眼前 一 亮 的 图 标 动画 效果 ， 如 图 5-44 所 示 。 


| 这 是 一 个 下 载 图 标的 动画 效果 ， 通 过 对 图 形 
组 动 ， 合 的 表现 更 加 真实 。 


天 人 公会 | 会 


ee Fi 网络 图 标的 动画 效果 ， 通 过 图 内 晃动 的 幅度 也 
1 是 从 大 至 小 ， 直 到 最 终 停止 。 在 动画 中 同时 加 入 缓 动 ， 使 动画 的 表现 更 加 真实 。 


路 径 重组 法 是 指 将 组 成 图 标的 笔画 路 径 在 动画 过 程 中 进行 重组 ， 从 而 构成 一 个 新 的 图 标 。 采 用 
路 径 重 组 法 的 图 标 动画 ， 需 要 设计 师 能 够 仔细 观察 两 个 图 标 之 间 笔画 的 关系 ， 这 种 图 标 动画 的 表现 
方法 也 是 目前 比较 流行 的 图 标 动画 效果 ， 如 图 5-45 所 示 。 


! 这 是 一 个 “菜单 ” “返回 ”图 标 之 间 的 交互 切换 动画 ， 组 成 “菜单 
;成 箭头 形状 的 “返回 ， 与 此 同时 进行 整体 旋转 ， 最 终 过 渡 到 新 的 图 标 。 
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3. 点 线 面 降级 法 


点 线 面 降级 法 是 指 应 用 设计 理念 中 的 点 、 线 、 面 理论 ， 在 动画 表现 过 程 中 ， 将 面 降级 为 线 、 将 
线 降级 为 点 表现 图 标的 切换 过 渡 动画 效果 。 

面 与 面 进行 转换 的 时 候 ， 可 以 使 用 线 作为 介质 ， 一 个 面 先 转换 为 一 根 线 ， 再 通过 这 根 线 转换 成 
另 一 个 面 。 同 样 的 道理 ， 线 和 线 转换 时 ， 可 以 使 用 点 作为 介质 ， 一 根 线 先 转换 成 一 个 点 ， 再 通过 这 
个 点 转换 成 另外 一 根 线 ， 如 图 5-46 所 示 。 


人 个 “顺序 播放 ”图 标 与 “随机 播放 ”图 标 之 间 的 交互 切换 动画 ，“ 顺 序 播 放 ” 图 标的 路 径 由 线 收 缩 为 一 个 吕 
! 然后 在 下 方 再 添加 一 个 点 ， 两 个 点 同时 向 外 展示 为 线 ， 从 而 切换 到 “随机 播放 ”图 标 。 


| 这 是 一 个 “记事 本 ”图 标 与 “更 多 ”图 标 之 间 的 交互 切换 动画 ，“ 记 事 本 "图 标的 路 径 由 线 收缩 为 点 ， 然 后 由 点 再 展 ; 
| 开 为 线 ， 直 到 变 成 圆 环形 ， 并 进行 旋转 ， 从 而 实现 从 贺 角 矩形 到 圆 形 的 切换 动画 效果 。 ] 


4. 这 淖 法 

庶 淖 法 也 是 图 标 动画 中 常用 的 一 种 表现 方法 ， 两 个 图 形 之 间 相 互 转换 时 ， 可 以 使 用 其 中 一 个 图 
形 作为 另 一 个 图 形 的 遮 单 ， 也 就 是 边界 ， 当 这 个 图 形 放大 的 时 候 ， 因 为 另 一 个 图 形 作为 边界 的 缘故 ， 
转换 变 成 另 一 个 图 形 的 形状 ， 如 图 5-47 所 示 。 


| 这 是 二 个 "村 间 "国标 与 “字符 ”图 标 之 间 的 交互 切换 动画 ，“ 指针 图 形 越 转 越 快 ， 同时 正 贺 形 背景 也 
逐渐 放大 ， 使 用 不 可 见 的 贺 角 答 形 作为 这 军 ， 当 正 圆 形 放大 到 一 定 程度 时 ， 被 园 角 和 拢 形 这 单 从 而 表现 出 贺 角 算 形 背景 
! 而 时 间 指 针 图 形 也 通过 位 置 和 旋转 属性 的 变化 构成 新 的 图 形 。 


:让 “信息 点 ”图 标 与 “详情 页 ” 国标 之 问 的 交 坪 切 湾 动 再， 底部 的 小 点 通过 位 置 局 性交 化 疹 动 至 合适 的 位 置 ， 
| 再 通过 大 小 属性 变化 逐渐 变 大 ， 通过 一 个 不 可 见 的 矩 形 作为 庆 章 ， 当 圆 形 无 限 放 大 时 ， 关 单 矩 形成 为 它 的 边界 ， Ee 
+ 过 渡 到 和 矩形 的 效果 。 


分 裂 融合 法 是 指 构成 图 标的 图 形 笔画 相互 融合 变形 从 而 切换 为 另外 一 个 图 标 。 分 裂 融 合法 尤其 
适用 于 其 中 一 个 图 标 是 一 个 整体 ， 另 一 个 图 标 由 多 个 分 离 的 部 分 组 成 的 情况 ， 如 图 5-48 所 示 。 
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2 个 正 圆 形 与 “网 格 ” 图 标 之 间 的 交互 切换 动画 ,一 个 


6. 图 标 特性 法 


图 标 特性 法 是 指 根据 所 设计 的 图 标 在 日 常生 活 中 的 特征 或 者 根据 图 标 需要 表达 的 实际 意义 ， 来 
设计 图 标的 交互 动画 效果 ， 这 就 要 求 设计 师 具 有 较 强 的 观察 能 力 和 思维 发 散 性 ， 如 图 5-49 所 示 。 


;这 是 一 个 “删除 ”图 标的 动画 效果 ， 通 过 垃圾 权 图 形 来 表现 
; 以 及 模拟 重力 反弹 的 盖子 ， 使 该 “删除 ”图 标的 表现 非常 生动 。 


制作 图 标 变换 动 效 © 


随 着 扁平 化 设计 风格 的 流行 ， 在 移动 端 应 用 界面 中 通常 使 用 非常 简约 的 线 框 功能 图 标 ， 并 且 为 
线 框 功能 图 标 加 入 相应 的 交互 动 效 。 例 如 ， 当 用 户 单 击 某 个 功能 图 标 ， 触 发 某 种 功能 后 ， 该 图 标 会 
变形 成 另 一 种 图 标 ， 从 而 可 以 起 到 另 一 种 功能 。 在 本 节 中 将 带领 读者 完成 一 个 菜单 按钮 图 标的 变换 
动 效 制作 ， 通 过 该 动 效 的 制作 使 读者 掌握 图 标 变形 动 效 的 表现 方法 和 制作 技巧 。 


实例 17 一 一 制作 图 标 变换 动 效 © 


源 文件 : 源 文件 \ 第 5 章 \5-1-5aep ”视频 : 视频 \ 第 5 章 \5-1-5.mp4 

加 在 After Effects 中 新 建 一 个 空白 的 项 目 , 执行 “合成 ”> “新建 合 成 ”命令 
弹出 "合成 设置 "对 话 框 ,对 相关 选项 进行 设置 ,如 图 5-50 所 示 。 使 用 " 圆 角 和 矩形 工具 "， a 
在 工具 栏 中 设置 “填充 ”为 白色 ，“ 描 边 ” 为 无 ， 在 “合成 ”窗口 中 绘制 圆 角 矩 形 ， 如 图 5-51 所 示 。 

现在 “时 间 轴 ”面板 中 展开 该 形状 图 层 下 方 “ 和 矩形 1” 选 项 中 的 “矩形 路 径 1” 选 项 ， 设 置 其 
“大 小 ”和 “ 圆 度 ” 属 性 ， 效 果 如 图 5-52 所 示 。 使 用 “向 后 平移 ( 锚 点 ) 工具 ”， 调 整 该 圆 角 和 矩形 
的 锚 点 位 于 图 形 的 中 心 位 置 ， 如 图 5-53 所 示 。 

天 选择 该 形状 图 层 ， 按 快捷 键 P， 显 示 该 图 层 的 “位 置 ”属性 ， 通 过 该 属性 设置 图 形 的 位 置 ， 
如 图 5-54 所 示 。 选 择 “形状 图 层 1”， 按 快捷 键 Cl+D， 原 位 复制 该 图 层 得 到 “形状 图 层 2”， 展 
开 该 图 层 的 “位 置 ”属性 ， 通 过 该 属性 设置 图 形 的 位 置 ， 如 图 5-55 所 示 。 


图 5-51 


图 5-52 图 5-53 


图 5-54 图 5-55 
贡 选择 “形状 图 层 2”， 按 快捷 键 Ctl+D， 原 位 复制 该 图 层 得 到 “形状 图 层 3”， 展 开 该 图 层 
的 “位 置 " 属性 , 通过 该 属性 设置 图 形 的 位 置 ， 如 图 5-56 所 示 。 不 要 选中 任何 元 素 和 图 层 , 使 用 “ 术 
到 工具 ”， 在 工具 栏 中 设置 “填充 ”为 无 ，“ 描 边 ” 为 白色 ，“ 描 边 宽度 ”为 12 像素 ， 在 “合成 ” 
窗口 中 按 住 Shift 键 拖 动 鼠 标 绘制 正 圆 形 ， 如 图 5-57 所 示 。 


三 使 用 “向 后 平移 ( 锚 点 ) 工具 ”， 调 整 该 正 圆 形 的 锚 点 位 于 图 形 的 中 心 位 置 ， 并 将 其 调整 到 
合适 的 大 小 和 位 置 ， 如 图 5-58 所 示 。 选 择 “ 形 状 图 层 4”， 单 击 该 图 层 下 方 的 “内 容 ” 选 项 右 侧 的 
三 角形 按钮 , 在 弹出 的 菜单 中 选择 “修剪 路 径 ” 选项 , 为 图 形 添加 “修剪 路 径 " 属性 , 如 图 5-59 所 示 。 


图 5-58 图 5-59 
了 将 “时 间 指示 器 ” 移 至 0 秒 9 帧 的 位 置 ， 为 “修剪 路 径 1” 选 项 中 的 “结束 ”属性 插入 关 
键 帧 ， 并 设置 其 值 为 0% ， 如 图 5-60 所 示 。 在 “合成 ”窗口 中 可 以 看 到 正 圆 形 描 边 完全 不 可 见 ， 如 
图 5-61 所 示 。 


图 5-60 图 5-61 
加 将 “时 间 指 示 器 ” 移 至 0 秒 17 帧 的 位 置 ， 修 改 “ 修 剪 路 径 1” 选 项 中 的 “结束 ”属性 值 为 
100%， 如 图 5-62 所 示 。 将 “时 间 指 示 器 ” 移 至 1 秒 10 帧 的 位 置 ， 单 击 “ 结 束 ”属性 左 侧 的 “ 添 
加 和 移 除 关键 帧 ”按钮 ， 在 当前 时 间 为 “结束 ”属性 添加 关键 帧 ， 如 图 5-63 所 示 。 


图 5-62 图 5-63 

芭 将 “时 间 指示 器 ” 移 至 1 秒 18 帧 的 位 置 ， 修 改 “ 修 前 路径 1” 选 项 中 的 “结束 ”属性 值 为 
09% ， 如 图 5-64 所 示 。 同 时 选中 该 图 层 中 的 4 个 关键 帧 ， 按 快捷 键 FPg， 为 选中 的 关键 帧 应 用 “组 动 ” 
到 5-65 所 示 。 

名 此 时 拖 动 “ 时 间 指示 器 ”， 在 “合成 ”窗口 中 可 以 看 到 
路 径 端 点 是 平角 的 ， 如 图 5-66 所 示 。 我 们 希望 路 径 的 端点 显示 为 


形 修剪 路 径 的 动画 效果 ， 但 是 其 
效果 ， 可 以 展开 “形状 图 层 4 


0 


本 


下 方 的 “椭圆 1” 选 项 中 的 “ 描 边 1” 选 项 ， 设 置 其 “线段 端点 ”选项 为 “ 圆 头 端点 ”， 效 果 如 医 
5-67 所 示 。 


到 


图 5-64 图 5-65 


图 5-66 图 5-67 
2 将 “时 间 指示 器 ” 移 至 0 秒 位 置 ， 选择 “形状 图 层 1”， 按 快捷 键 P， 显 示 “ 位 置 ”属性 ， 
为 该 属性 插入 关键 帧 ， 如 图 5-68 所 示 。 将 “时 间 指 示 器 ” 移 至 0 秒 09 帧 的 位 置 ， 将 其 向 上 移 至 与 
中 间 的 圆 角 矩形 相 重合 的 位 置 ， 如 图 5-69 所 示 。 


图 5-68 图 5-69 
天 将 “时 间 指 示 器 ” 移 至 1 秒 18 帧 的 位 置 ， 单 击 “ 位 置 ”属性 左 侧 的 “添加 和 移 除 关键 帧 
按钮 ， 在 当前 时 间 为 该 属性 添加 关键 帧 ， 如 图 5-70 所 示 。 将 “时 间 指 示 器 ” 移 至 2 秒 02 帧 的 位 置 ， 
将 其 向 下 移 至 合适 的 位 置 ， 如 图 5-71 所 示 。 
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了 B 将 “时 间 指 示 器 ” 移 至 2 秒 04 帧 的 位 置 ， 将 其 向 上 


为 该 属性 插入 关键 帧 ， 如 图 5-73 所 示 。 


妈 5-72 所 示 。 将 “时 间 指 示 器 ” 移 至 0 秒 09 帧 的 位 置 ， 按 快捷 键 R， 显 示 该 医 


参 第 5 章 制作 UI 元 素 交互 动 效 


移 至 与 0 秒 相同 的 初始 位 置 ， 如 


层 的 “旋转 ”属性 ， 


图 5-72 图 5- 


阳 将 “时 间 指 示 器 ” 移 至 0 秒 17 帧 的 位 置 ， 设 置 元 素 的 旋转 角 


示 。 将 “时 间 指 示 器 ” 移 至 0 秒 19 帧 的 位 置 ， 设 置 元 素 的 旋转 角 
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度 为 325"， 效 果 如 图 5-74 所 


度 为 315"， 效 果 如 


图 5-74 
吏 将 “时 间 指 示 器 ” 移 至 1 秒 10 帧 的 位 置 ， 单 击 “ 旋 转 ” 


设置 元 素 的 旋转 角度 为 0"， 效 果 如 图 5-77 所 示 。 


图 5-75 


图 5-75 所 示 。 


属性 左 侧 的 “添加 和 移 除 关 键 帧 " 
按钮 ， 在 当前 时 间 为 该 属性 添加 关键 帧 ， 如 图 5-76 所 示 。 将 “时 间 指 示 器 ” 移 至 1 秒 18 帧 的 位 置 ， 


图 5-76 


图 5-77 


大 图 层 1” 


访 臣 


2 在 “时 间 轴 ”面板 中 拖 动 鼠标 ， 同 时 选中 “ 


中 的 所 有 关键 帧 ， 


按 快 熏 健 F9， 为 选中 的 关键 帧 应 用 “ 缓 动 ”效果 ， 如 图 5-79 所 示 。 


图 5-78 


图 5-79 


到 5-78 所 示 。 
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2 根据 制作 “形状 图 层 1” 的 方法 ， 


是 “形状 图 层 3” 中 的 图 形 是 向 下 移 到 位 置 ， 并 且 其 旋转 是 逆 


间 轴 ”面板 如 图 5-81 所 示 。 


可 以 完成 “形状 医 


层 3” 中 动画 效果 的 制作 ， 唯 一 不 同 的 
时 针 旋 转 ， 效 果 如 图 5-80 所 示 ，“ 时 


图 5-80 


了 将 "时间 指示 器 " 移 至 0 秒 08 帧 的 位 置 , 选择 "形状 图 


到 S-81 


层 2”, 按 快捷 键 T, 显示 该 图 层 的 “不 


透明 度 ” 属 性 ， 为 该 属性 插入 关键 帧 ， 如 医 


5-82 所 示 。 将 “ 


设置 “不 透明 度 ” 属 性 值 为 0% ， 如 图 5-83 所 示 。 


图 5-82 


丽 ) 将 “时 间 指 示 器 ” 移 至 1 秒 18 帧 的 


对 间 指 示 器 ” 移 至 0 秒 09 帧 的 位 置 ， 


图 5-83 


位 置 , 单 击 " 不 透明 度 ” 属 性 左 侧 的 “添加 和 移 除 关键 帧 " 


按钮 ， 在 当前 时 间 为 该 属性 添加 关键 帧 ， 如 医 


5-84 所 示 。 将 


设置 “不 透明 度 ” 属 性 值 为 100%， 如 图 5-85 所 示 。 


“时 间 指 示 器 ” 移 至 1 秒 19 帧 的 位 置 ， 


了 8) 完成 该 菜单 按钮 图 标 变换 动 效 的 制 


作 , 单 击 "预览 "面板 上 的 “播放 /停止 " 按 钾 国 , 可 以 在 “ 合 


成 ”窗口 中 预览 动画 效果 。 也 可 以 根据 前 


使 用 Photoshop 将 其 输出 为 GIF 格式 的 动 
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介绍 的 泻 染 输出 方法 ， 将 该 动画 泻 染 输出 为 视频 文件 ， 


画 ， 动 画 效果 妇 


到 5-86 所 示 。 


第 5 章 制作 UI 元 素 交互 动 效 ， 


a 


图 5-86 


[3 


玉 E 制作 日 历 图 标 动 效 ”@ 


设计 动态 的 图 标 效果 ， 可 以 使 该 图 标的 表现 更 加 直观 ， 具 有 更 强烈 的 视觉 表现 力 。 在 本 节 中 将 
带领 读者 完成 一 个 日 历 图 标 动 效 的 制作 ， 在 日 常生 活 中 ,日历 最 常见 的 就 是 翻 页 的 效果 ， 本 实例 所 
制作 的 日 历 图 标 动 效 同样 实现 的 就 是 日 历 的 翻 页 效果 ， 使 该 日 历 图 标的 表现 更 加 生动 。 具 体操 作 步 


又 可 扫描 二 维 码 看 电子 书 。 
实例 18 一 制作 日 历 图 标 动 交 © 


源 文件 ， 源 文件 \ 第 5 章 \5-1-6.aep 
视频 : 视频 \ 第 5 章 \5-1-6.mp4 


[二 2 制作 相机 图 标 动 效 i 
本 节 将 带领 读者 完成 一 个 相机 图 标的 动 效 制作 ， 在 该 相机 图 标的 动 效 中 ， 将 通过 各 种 基础 动画 


类 型 来 表现 组 成 相机 的 各 部 分 元 素 的 动 效 表现 ， 重 点 在 于 各 部 分 动 效 的 合理 衔接 和 细节 的 处 理 ， 从 
而 使 该 图 标的 动 效 表现 更 加 流畅 、 自 然 。 


实例 19 一 制作 相机 图 标 动 交 © 


源 文件 ， 源 文件 \ 第 5 章 \5-1-7.aep ”视频 : 视频 \ 第 5 章 \5-1-7.mp4 

到 在 Photoshop 中 设计 出 该 相同 图 标的 效果 ， 注 意 各 元 素 的 分 层 ， 需 要 便于 
在 After Effects 中 制作 动 效 , 如 图 5-87 所 示 。 执行 “文件 ” >“ 导入” >“ 文件 " 命令 ， 人 
在 弹出 的 “导入 文件 ”对 话 框 中 选择 需要 导入 的 素材 文件 “ 源 文件 \ 第 5 章 \ 素 材 \51701.psd”， 如 
图 5-88 所 示 。 


Ea 
Fa 
到 = 
可 = 
| 
可 = 
EE 
Ea 
酚 = 
到 = 
国 = 


图 5-87 


Ae 同 After Effects CC 移动 网 站 UI 交互 动 效 设 计 全 程 揭 秘 


单 击 “ 导 入 ”按钮 ,在 弹出 的 设置 对 话 框 中 对 相关 选项 进行 设置 , 如 图 5-89 所 示 。 单 击 
定 ” 按 钮 ， 导 入 PSD 素材 文件 并 自动 创建 合成 ， 如 图 5-90 所 示 。 


ah 
H 
El 


图 5-90 

在 “项 目 ” 面 板 中 双击 51701 合成 ， 在 “合成 ”窗口 中 可 以 看 到 该 合成 的 效果 ， 如 
图 5-91 所 示 。 在 “时 间 轴 ”面板 中 可 以 看 到 该 合成 中 的 相关 图 层 ， 将 “背景 ”图 层 锁定 ， 如 
到 5-92 所 示 。 


0:00:00:00 


og 


[| | LLLLLLLL NM 
了 


图 5-91 图 5-92 
选择 “图 标 背景 ”图 层 ， 将 其 他 图 层 暂时 隐藏 ， 将 “时 间 指 示 器 ” 移 至 0 秒 10 帧 的 位 置 ， 
显示 出 该 图 层 的 “缩放 ”和 “旋转 ”属性 ， 并 为 这 两 个 属性 分 别 插入 关键 帧 ， 如 图 5-93 所 示 。 设 置 
“缩放 ”属性 值 为 0% ， 效 果 如 图 5-94 所 示 。 


0:00;:00:10 po. 


ea HP 


"图 :。 佑 [加 二 ] = 


图 5-93 图 5-94 


梅 “时 间 指 示 器 ” 移 至 1 秒 的 位 置 ， 设 置 其 “缩放 ”属性 值 为 100%，“ 旋 转 ” 属 性 值 为 
-2x， 如 图 5-95 所 示 。 将 “时 间 指 示 器 ” 移 至 1 秒 03 帧 的 位 置 ， 在 “合成 ”窗口 中 对 图 形 进行 适 
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当 的 旋转 操作 ， 如 图 5-96 所 示 。 


图 5-95 加 5-96 
名将“ 时间 指示 器 ” 移 至 1 秒 08 帧 的 位 置 ， 在 “合成 ”窗口 中 对 图 形 进行 适当 的 旋转 操作 ， 
和 5-97 所 示 。 将 “时 间 指 示 器 ” 移 至 1 秒 10 帧 的 位 置 ， 设 置 其 “旋转 ”属性 值 为 -2x， 如 
5-98 所 示 。 


加 对 


到 5-97 图 5-98 

芭 同时 选中 该 图 层 中 的 所 有 属性 关键 帧 , 按 快捷 键 F9， 为 选中 的 关键 帧 应 用 “ 缓 动 " 效果 ， 
如 图 5-99 所 示 。 将 “时 间 指 示 器 ” 移 至 1 秒 08 帧 的 位 置 ， 选 择 “ 和 矩形 ”图 层 ， 显 示 该 图 层 ， 
按 快捷 键 S， 显 示 该 图 层 的 “缩放 ”属性 ， 为 该 属性 插入 关键 帧 ， 并 设置 水 平 缩放 为 0% ， 效 果 
如 图 5-100 所 示 。 


图 5-99 图 5-100 


三 将 “时 间 指示 器 ” 移 至 1 秒 18 帧 的 位 置 ， 设 置 该 图 层 的 水 平 缩放 为 100% ， 效 果 如 
图 5-101 所 示 。 同 时 选中 该 图 层 中 的 两 个 属性 关键 帧 ， 按 快捷 键 FB， 为 选中 的 关键 帧 应 用 “ 缓 动 ” 
效果 ， 如 图 5-102 所 示 。 

三) 将 “时 间 指 示 器 ” 移 至 1 秒 20 帧 的 位 置 ， 选 择 “摄像 头 ”图 层 ， 显 示 该 图 层 ， 按 快捷 键 S， 
显示 该 图 层 的 “缩放 " 属性 , 为 该 属性 插入 关键 帧 , 并 设置 属性 值 为 0%, 效果 如 图 5-103 所 示 。 将 “时 
间 指 示 器 ” 移 至 2 秒 的 位 置 ， 设 置 “ 缩 放 ” 属 性 值 为 100% ， 效 果 如 图 5-104 所 示 。 


二 


OR ee sm >=>==== 


图 5-101 图 5-102 


到 5-103 图 5-104 


同时 选中 该 图 层 中 的 两 个 属性 关键 帧 ， 按 快捷 键 F9， 为 选中 的 关键 帧 应 用 “ 缓 动 ”效果 ， 如 
到 5-105 所 示 。 使 用 相同 的 制作 方法 ， 可 以 完成 “闪光 灯 ” 图 层 中 动画 效果 的 制作 ， 如 图 5-106 所 示 。 


图 5-105 图 5-106 


选择 “镜头 1” 图 层 ， 显 示 该 图 层 ， 执 行 “ 效 果 ”>“ 过 渡 ”>“ 径 向 擦 除 ” 命 令 ， 为 该 区 
层 应 用 “ 径 向 擦 除 ” 效果， 如 图 5-107 所 示 。 将 “时 间 指 示 器 ” 移 至 1 秒 22 帧 的 位 置 , 为 “ 径 向 擦 除 ” 
效果 中 的 “过 渡 完成 ”属性 插入 关键 帧 ， 设 置 该 属性 值 为 100%， 效 果 如 图 5-108 所 示 。 


图 5-108 
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四 ee 及 第 5 章 制作 UI 元 素 交互 动 效 
将 “时 间 指 示 器 ” 移 至 2 秒 18 帧 的 位 置 ， 设 置 “ 过 渡 完成 ”属性 值 为 0%， 效 果 如 

和 5-109 所 示 。 执 行 “图 层 ”>“ 图 层 样式 ”>“ 投 影 ”命令 ， 为 该 图 层 应 用 “投影 ”图 层 样 式 ， 对 

“投影 ”图 层 样式 的 相关 选项 进行 设置 ， 效 果 如 图 5-110 所 示 。 


图 5-109 图 5-110 
将 “时 间 指 示 器 ” 移 至 2 秒 08 帧 的 位 置 ， 为 “投影 ”样式 中 的 “不 透明 度 ” 属 性 插入 关键 
帧 ， 并 设置 其 值 为 0%， 如 图 5-111 所 示 。 将 “时 间 指 示 器 ” 移 至 2 秒 18 帧 的 位 置 ， 设 置 “ 投 影 ” 
样式 的 “不 透明 度 ” 属 性 值 为 20% ， 效 果 如 图 5-112 所 示 。 


qs 图 5-112 

同时 选中 该 图 层 中 的 4 个 属性 关键 帧 ， 按 快捷 键 F9， 为 选中 的 关键 帧 应 用 “ 缓 动 ” 效 果 ， 
如 图 5-113 所 示 。 选 择 “ 镜 头 2” 图 层 ， 显 示 该 图 层 ， 执 行 “ 效 果 ”> “过 渡 ”> “ 径 向 擦 除 ”命令 ， 
为 该 图 层 应 用 “ 径 向 擦 除 ”效果 ， 如 图 5-114 所 示 。 


图 5-113 图 5-114 


将 “时 间 指示 器 ” 移 至 2 秒 04 帧 的 位 置 ， 为 “ 径 向 擦 除 ” 效 果 中 的 “过 渡 完成 ”属性 插入 


关键 帧 ， 设 置 该 属性 值 为 100%, 效果 如 图 5-115 所 示 。 将“ 时间 指示 器 ” 移 至 3 秒 的 位 置 , 设置 “过 
渡 完 成 ”属性 值 为 0% ， 效 果 如 图 5-116 所 示 。 

同时 选中 该 图 层 中 的 两 个 属性 关键 帧 ， 按 快捷 键 F9， 为 选中 的 关键 帧 应 用 “ 缓 动 ”效果 。 
使 用 相同 的 制作 方法 ， 可 以 完成 “镜头 3” 和 “镜头 4” 图 层 中 动画 的 制作 ， 效 果 如 图 5-117 所 示 ， 
“时 间 轴 ”面板 如 图 5-118 所 示 。 
选择 “反光 1” 图 层 ， 显 示 该 图 层 ， 将 “时 间 指 示 器 ” 移 至 3 秒 10 帧 的 位 置 ， 按 快捷 键 S， 
显示 该 图 层 的 “缩放 ”属性 ,为 该 属性 插入 关键 帧 , 并 设置 其 值 为 0%, 效果 如 图 5-119 所 示 。 将 “时 
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间 指 示 器 ” 移 至 3 秒 15 帧 的 位 置 ， 设 置 “ 缩 放 ”属性 值 为 100% ， 效 果 如 图 5-120 所 示 。 


图 5-115 图 5-116 


四 
图 5-117 图 5-118 


图 5-119 图 5-120 

2 同时 选中 该 图 层 中 的 两 个 属性 关键 帧 ， 按 快捷 键 F9， 为 选中 的 关键 帧 应 用 “ 缓 动 ”效果 。 
和 层 中 的 两 个 属性 关键 帧 ， 按 快捷 键 Ctt+C， 复 制 关键 帧 ， 选 择 “反光 2” 图 层 ， 显 示 该 
和 层 ,将 “时 间 指 示 器 " 移 至 3 秒 10 帧 的 位 置 , 按 快捷 键 Ctri+V, 粘贴 关键 帧 , 效果 如 图 5-121 所 示 ， 
“时 间 轴 ”面板 如 图 5-122 所 示 。 


可 
和 
羡 

日 
x 


图 5-121 图 5-122 
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了) 选择 “图 标 背景 ”图 层 ， 单 击 “ 运 动 模糊 ”按钮 ， 为 该 图 层 打 开 “ 运 动 模糊 ”功能 ， 如 
图 5-123 所 示 。 完 成 该 相机 图 标 动 效 的 制作 ，“ 时 间 轴 ”面板 如 图 5-124 所 示 。 


图 5-123 图 5-124 


站 单 击 “ 预 览 ”面板 上 的 “播放 /停止 ”按钮 围 ， 可 以 在 “合成 ”窗口 中 预览 动画 效果 。 也 
可 以 根据 前 面 介 绍 的 泻 染 输 出 方法 ， 将 该 动画 泻 染 输 出 为 视频 文件 ， 再 使 用 Photoshop 将 其 输出 为 
GIF 格式 的 动画 ， 效 果 如 图 5-125 所 示 。 


图 5-125 


5.2 蜂 进度 条 动 效 设计 p 


在 浏览 移动 应 用 等 场景 ， 因 为 网 速 慢 或 是 硬件 差 的 关系 ， 难 免 会 遇 上 等 待 加 载 的 情况 ， 没 人 喜 
欢 等 待 ， 耐 心 差 的 用 户 可 能 因为 操作 得 不 到 及 时 反馈 ， 直 接 选 择 放 弃 。 所 以 在 移动 端 应 用 程度 中 还 
有 一 种 常见 的 交互 动 效 就 是 进度 条 的 动画 ， 通 过 进度 条 动画 ， 可 以 使 用 户 了 解 当前 的 操作 进度 ， 给 
用 户 以 心理 暗示 ， 使 用 户 能 够 耐心 等 待 ， 从 而 提升 用 户 体验 感 。 


进度 条 与 滚动 条 非常 相似 ， 进 度 条 在 外 观 上 只 是 比 滚动 条 缺少 了 可 拖 动 的 滑 块 。 进 度 条 元 素 是 
移动 端 应 用 程序 在 处 理 任务 时 ， 实 时 地 以 图 形 方式 显示 的 处 理 当 前 任务 的 完成 度 ， 剩 余 未 完成 任务 
量 的 大 小 和 可 能 需要 完成 的 时 间 ， 例 如 下 载 进度 、 视 频 播放 进度 等 。 大 多 数 移动 端 界面 中 的 进度 条 
是 以 长 条 矩形 的 方式 显示 的 ， 进 度 条 的 设计 方法 相对 比较 简单 ， 重 点 是 色彩 的 应 用 和 质感 的 体现 ， 
如 图 5-126 所 示 。 
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图 5-126 
进度 条 动画 一 般 用 于 较 长 时 间 的 加 载 ， 通 常 配 合 百 分 比 指数 ， 让 用 户 对 当前 加 载 进度 和 剩余 等 
待 时 间 有 个 明确 的 心理 预期 ， 如 图 5-127 所 示 。 


直线 形式 的 进度 条 是 我 们 在 移动 端 
应 用 中 最 常见 的 进度 条 表现 方式 。 


et i 在 该 进度 条 动 效 中 设计 了 一 只 候 行 
| 的 蜗牛 形象 ， 进 度 条 跟随 着 蜗牛 的 ! 
| [人 a 肥 行 而 增长 ， 非 常 直观 地 表现 出 当 ; 
| YW Ea 前 的 进度 ， 给 用 户 很 好 的 提示 。 


i 
: a 圆 形 的 进度 条 也 是 目前 比较 常见 


一 种 进度 条 动画 表现 形式 。 该 进度 
条 将 圆 形 与 贪 吃 蛇 形象 很 好 地 结合 
在 一 起 ， 贪 吃 蛇 围绕 圆 点 进行 旋转 
吃 掉 所 有 圆 点 ， 则 
而 富有 趣味 性 。 


本 


Golden Gate Bridge 


| 
! 该 移动 端 界面 使 用 Logo 线 描 的 动画 效果 来 表现 界面 的 载 入 进度 , 并 且 将 加 载 进度 动画 与 界面 转 场 完美 地 结合 在 二 起 ，; 
当 Logo 线 措 完成 后 逐渐 淡出 ， 而 所 载 入 的 界面 逐渐 淡 入 ， 很 好 地 实现 了 界面 的 转 场 | 


图 5-127 
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进度 条 能 够 表现 出 当前 的 加 载 进度 ， 为 用 户 带 来 最 直观 的 体验 ， 避 免 用 户 的 言 目 等 待 ， 加 载 进 
度 条 能 够 有 效 提升 App 应 用 的 用 户 体验 。 在 本 节 中 将 带领 读者 完成 一 个 矩形 进度 条 动 效 的 制作 ， 在 
该 矩形 进度 条 动 效 的 制作 过 程 中 ， 主 要 通过 蒙 版 路 径 的 变形 ， 从 而 实现 进度 条 的 显示 动 效 ， 并 且 通 
过 添加 “色相 /饱和 度 ” 效 果 ， 制 作出 进度 条 变化 过 程 中 进度 条 色彩 也 一 起 变化 的 效果 。 


实例 20 一 — 制 作答 形 进度 条 动 效 人 


源 文件 : 源 文件 \ 第 5 章 \5-2-2.aep ”视频 : 视频 \ 第 5 章 5-2-2.mp4 

加 执行 “文件 ” >“ 导 入 ” >“ 文件” 命令 ， 在 弹出 的 “导入 文件 ”对 话 框 中 
选择 需要 导入 的 素材 文件 “ 源 文 件 \ 第 5 章 \ 素 材 \52201.psd”， 如 图 5-128 所 示 。 
击 “ 导 入 ”按钮 ， 在 弹出 的 设置 对 话 框 中 对 相关 选项 进行 设置 ， 如 图 5-129 所 示 。 


Ee 


[hs 
你 


图 5-128 图 5-129 


总 单 击 “ 确 定 ” 按钮 ， 导 入 PSD 素材 文件 并 自动 创建 合成 ， 如 图 5-130 所 示 。 在 “项 目 ” 
板 中 双击 52201 合成 ， 在 “合成 ”窗口 中 可 以 看 到 该 合成 的 效果 ， 如 图 5-131 所 示 。 


图 5-130 图 5-131 


名 在 “时 间 轴 ”面板 中 可 以 看 到 该 合成 中 的 相关 图 层 , 将 “背景 和 “进度 条 背景 ”图 层 锁定 ， 
如 图 5-132 所 示 。 选 择 “进度 条 ”图 层 ， 使 用 “矩形 工具 ”， 在 “合成 ”窗口 中 合适 的 位 置 拖 动 鼠 


标 绘制 矩形 蒙 版 ， 如 图 5-133 所 示 。 
芭 将 “时 间 指 示 器 ” 移 至 0 秒 位 置 ， 为 “ 蒙 版 1” 选 项 下 方 的 “ 蒙 版 路 径 ” 属 性 插入 关键 帧 ， 
如 图 5-134 所 示 。 将 “时 间 指 示 器 ” 移 至 1 秒 的 位 置 ， 使 用 “选取 工具 ”， 选 择 蒙 版 矩形 路 径 右 侧 
的 两 个 锚 点 ， 向 右 拖 动 调整 蒙 版 图 形 ， 效 果 如 图 5-135 所 示 。 

三 将 “时 间 指 示 器 ” 移 至 3 秒 的 位 置 , 使 用 “选取 工具 ”, 选择 蒙 版 矩形 路 径 右 侧 的 两 个 锚 点 ， 
向 右 拖 动 调整 蒙 版 图 形 , 效果 如 图 5-136 所 示 。 将 “时 间 指 示 器 " 移 至 4 秒 的 位 置 , 使 用 “选取 工具 ”， 
调整 蒙 版 图 形 ， 完 成 整个 进度 条 的 显示 ， 效 果 如 图 5-137 所 示 。 


< 


OR ee cc sa zs = 


0:00:00:00 


图 5-134 图 5-135 


> 


图 5-136 图 5-137 


同时 选中 该 属性 的 4 个 关键 帧 ， 按 快捷 键 F9， 为 其 应 用 “ 缓 动 ”效果 ， 如 图 5-138 所 示 。 


图 5-138 
选择 “进度 条 ”图 层 ， 执 行 “ 效 果 ”>“ 颜 色 校正 ”>“ 色 相 / 饱 和 度 ” 命 令 ， 自 动 打开 “ 效 


果 控 件 ” 面 板 ， 并 显示 “色相 /饱和 度 ” 效 果 的 相关 设置 选项 ， 如 图 5-139 所 示 。 将“ 时间 指 示 器 ” 
移 至 0 秒 的 位 置 ， 为 “色相 /饱和 度 ” 选 项 中 的 “通道 范围 ”属性 插入 关键 帧 ， 如 图 5-140 所 示 。 
等 “时 间 指 示 器 ” 移 至 4 秒 的 位 置 ， 在 “效果 控件 ”面板 中 对 “ 主 色 相 ” 选 项 进行 设置 ， 
如 图 5-141 所 示 ， 在 “合成 ”窗口 中 可 以 看 到 进度 条 图 形 的 颜色 效果 ， 如 图 5-142 所 示 。 
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图 5-139 


图 5-141 


图 5-142 


第 5 章 制作 UI 元 素 交 互动 效 


将 “时间 指示 器 " 移 至 起 始 位 置 , 执行 "图 层 " > "新 建 " > "文本 " 命令 , 添加 一 个 空 文本 图 层 ， 


如 图 5-143 所 示 。 选 中 该 图 层 ， 执 行 “ 效 果 ”> “文本 ”> “编号 ”命令 ， 弹 出 “编号 ”对 
设置 如 图 5-144 所 示 。 


单 击 


图 5-143 


Ez 


图 5-144 


“确定 ”按钮 , 为 该 医 


如 图 5-145 所 示 。 在 “合成 ”窗口 + 


云 心 


话 框 ， 


“编号 " 效果 , 在 “效果 控件 "面板 中 对 相关 选项 进行 设置 ， 


将 编号 数字 调整 至 合适 的 位 置 ， 如 图 5-146 所 示 。 
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不 要 选择 任何 对 象 ， 使 用 “ 模 排 文字 工具 ”， 在 “合成 ”窗口 中 单 击 并 输入 文字 ， 如 区 
5_147 所 示 。 将“ 时间 指 示 吕 " 移 至 0 和 的 位 置 ， 选 泽 , 空 文本 图 展 。， 展 开 “效果 选 页 纺 号 ， 
选项 下 的 “格式 " 选项 ,为 “数值 /位 移 /随机 最 大 ”属性 插入 关键 帧 ， 如 图 5-148 所 示 。 


图 5-147 图 5-148 
将 “时 间 指 示 器 ” 移 至 1 秒 的 位 置 ， 设 置 “ 数 值 / 位 移 / 随机 最 大 ”属性 值 为 15， 如 


5-149 所 示 。 将 “时 间 指 示 器 ” 移 至 3 秒 位 置 ， 设置“ 数值 /位 移 /随机 最 大 ”属性 值 为 80， 如 
5-150 所 示 。 


加 


加 


图 5-149 图 5-150 
将 “时 间 指 示 器 ” 移 至 4 秒 位 置 ， 设 置 “ 数 值 /位移 / 随机 最 大 ” 属性 值 为 100， 如 
到 5-151 所 示 。 在 “项 目 ” 面 板 的 合成 上 右 击 ， 在 弹出 的 菜单 中 选择 “合成 设置 ”命令 ， 弹 出 “ 合 
成 设置 ”对 话 框 ， 修 改 “ 持 续 时 间 ” 为 5 秒 ， 如 图 5-152 所 示 。 


图 5-151 图 5-152 


单 击 “确定 ” 按钮 , 完成 “合成 设置 ” 对 话 框 的 设置 , 展开 各 图 层 所 设置 的 关键 帧 ,“ 时 间 轴 ” 
板 如 图 5-153 所 示 。 
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图 5-153 


了 B 完成 该 矩形 进度 条 动 效 的 制作 ， 单 击 “ 预 览 ” 面 板 上 的 “播放 /停止 ”按钮 国 ， 可 以 在 “ 合 


成 ”窗口 中 预览 动画 效果 。 也 可 以 根据 前 面 介绍 的 泻 染 输 出 方法 ， 将 该 动画 泻 染 输出 为 视频 文件 ， 
再 使 用 


Photoshop 将 其 输出 为 GIF 格式 的 动画 ， 动 画 效果 如 图 5-154 所 示 。 


一 一 


图 5-154 


制作 圆 形 进度 条 动 效 
在 上 一 节 中 通过 蒙 版 的 功能 制作 了 和 矩形 进度 条 动 效 ， 在 本 节 将 带领 读者 完成 一 个 圆 形 进度 条 动 


效 的 制作 , 在 该 动 效 中 主要 是 通过 “修剪 路 径 ” 属 性 来 实现 圆 形 进度 条 动 效 的 表现 ， 并 且 通 过 “编号 " 
效果 来 实现 百分比 数值 的 变化 。 具 体操 作 步 又 可 扫描 二 维 码 看 电子 书 。 


nN 
实例 21 一 一 制作 圆 形 进度 条 动 效 @) 3E 
源 文件 ， 源 文件 \ 第 5 章 \5-2-3.aep 了 
视频 : 视频 \ 第 5 章 \5-2-3.mp4 加 3 


扫 码 看 电子 书 


工具 栏 动 效 设计 p 


移动 端 应 用 中 的 工具 栏 是 显示 图 形式 按钮 的 选项 控制 条 ， 每 个 图 形 按钮 称 为 一 个 工具 项 ， 
执行 移动 端 应 用 中 的 一 个 功能 ， 或 在 不 同 的 移动 端 界面 中 进行 跳 转 。 通 常情 况 下 ， 出 现在 工具 栏 上 
的 按钮 所 执行 的 都 是 一 些 比 较 常用 的 功能 ， 主 要 是 为 了 更 加 方便 用 户 的 使 用 。 


天 于 工具 栏 动 效 设 计 
具 栏 一 般 应 用 于 移动 端 应 用 程序 中 频繁 使 用 的 功能 ， 而 专门 在 应 用 界面 中 开辟 出 一 块 地 方 来 


设置 这 些 常用 的 操作 。 这 样 的 设计 直观 突出 ， 且 经 常 使 用 这 类 操作 的 用 户 会 觉得 方便 上 且 更 有 效率 。 
工具 栏 需要 根据 应 用 界面 整体 的 风格 来 进行 设计 ， 只 有 这 样 才能 够 使 整个 应 用 界面 和 谐 统一 。 如 
图 5-155 所 示 为 设计 精美 的 应 用 工具 栏 。 
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四 浮动 工具 图 标 


弹出 功能 选项 


底部 工具 栏 

图 5-155 
目前 在 许多 移动 端 界面 设计 中 都 会 为 界面 中 的 工具 栏 加 入 交互 动 效 设计 ， 特 别 是 当 一 组 工具 
标的 显示 与 隐藏 和 时， 使 用 交互 动画 的 方式 呈现 ， 会 给 用 户 带 来 很 好 的 交互 体验 ， 如 图 5-156 所 示 。 


到 


| 组 工具 图 标 默认 隐藏 在 | 
| 界面 底部 的 “加 号 ” 按 | 
| 钮 图 标 中 ， 当 用 户 在 界 
| 面 中 点 击 该 图 标 时 ， 隐 | 
| 茂 的 工具 图 标 会 以 交互 
| 动画 的 方式 呈现 在 界面 
; 中 ， 非 常 便于 用 户 的 操 
; 作 , 再 次 单 击 底部 的 "又 ; 
.号 ”按钮 图 标 ,会 以 交 ! 
| 互动 画 的 方 工 将 相应 的 ; 
;图标 收缩 隐藏 ， 动 态 的 | 
| 表现 效果 给 用 户 带 来 很 | 
| 好 的 体验 。 


移动 设备 由 于 屏幕 较 小 ， 所 以 在 移动 App 应 用 中 常常 将 一 些 功能 操作 选项 隐藏 ， 当 用 户 点 击 界 
中 相应 的 图 标 时 才 会 展开 相应 的 功能 操作 选项 ， 而 在 这 些 功能 操作 选项 展开 的 过 程 中 同样 可 以 加 
入 动 效 ， 从 而 使 界面 的 动态 表现 效果 更 加 突出 。 


实例 22 一 一 制作 展开 工具 栏 动 效 

源 文件 : 源 文件 \ 第 5 章 \5-3-2.aep 视频 : 视频 \ 第 5 章 \5-3-2.mp4 

闻 打开 After Effects, 执行 "文件 " > "导入" > "文件 " 命令 , 弹出 “导入 文件 ” ET 
对 话 框 , 选择 “ 源 文件 \ 第 5 章 \ 素 材 53201.psd"” 文件 , 如 图 5-157 所 示 。 单 击 “ 导 虑 
入 ”按钮 ， 弹 出 设置 对 话 框 ， 设 置 如 图 5-158 所 示 。 
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图 5-157 图 5-158 


单 击 “确定 ”按钮 ， 导 入 PSD 素材 文件 ， 并 自动 生成 合成 ， 如 图 5-159 所 示 。 在 “项 目 ” 


面板 中 的 53201 合成 上 右 击 ， 在 弹出 的 菜单 中 选择 “合成 设置 ”命令 ， 弹 出 “合成 设置 ”对 话 框 ， 
设置 “持续 时 间 ” 为 5 秒 ， 如 图 5-160 所 示 。 


所 5-159 图 5-160 

单 击 “ 确 定 ”按钮 ， 完 成 “合成 设置 ”对 话 框 的 设置 ， 双 击 53201 合成 ， 在 “合成 ”窗口 
中 打开 该 合成 , 效果 如 图 5-161 所 示 。 在 “时 间 轴 ”面板 中 可 以 看 到 该 合成 中 相应 的 图 层 , 将 “背景 " 
到 层 锁 定 ， 如 图 5-162 所 示 。 
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图 5-161 图 5-162 
使 用 “椭圆 工具 ”， 设 置 “ 填 充 ” 为 白色 ，“ 描 边 ”为 无 ， 在 “合成 ”窗口 中 按 住 Shift 键 
拖 动 鼠标 ， 绘 制 正 圆 形 ， 将 得 到 的 图 层 重 命名 为 “光标 ”， 如 图 5-163 所 示 。 不 要 选择 任何 对 象 ， 
使 用 “ 珑 形 工具 ” 和 得 


设置 “填充 ”为 拭 01850，“ 描 边 ”为 无 ， 在 “合成 ”窗口 中 绘制 矩形 ， 将 得 

到 的 图 层 重 命名 为 “下 拉 形 状 ”， 如 图 5-164 所 示 。 

在 “时 间 轴 ”面板 中 将 “光标 ”和 “下 拉 形 状 ” 图 层 移 至 “图 标 1” 的 下 方 ， 并 暂时 将 “ 状 

兰 ” 图 层 隐藏 ， 如 图 5-165 所 示 。 在 “合成 ”窗口 中 ， 分 别 将 “图 标 1”“ 图 层 2” 和 “图 标 3” 
这 3 个 图 层 中 的 图 标 移 至 合适 的 位 置 ， 如 图 5-166 所 示 。 
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图 5-163 图 5-164 


LL 


图 5-165 图 5-166 

三 选择 “光标 ”图 层 ， 将 “时 间 指示 器 ” 移 至 0 秒 08 帧 的 位 置 ， 按 快捷 键 T， 显 示 该 图 层 的 
“不 透明 度 ”属性 ， 设 置 该 属性 值 为 0% ， 并 插入 该 属性 关键 帧 ， 如 图 5-167 所 示 。 将 “时 间 指 示 器 ” 
移 至 0 秒 12 帧 的 位 置 ， 设 置 “ 不 透明 度 ” 属 性 值 为 50% ， 效 果 如 图 5-168 所 示 。 


图 5-167 图 5-168 


加 将 “时 间 指示 器 ” 移 至 0 秒 16 帧 的 位 置 ， 添 加 “不 透明 度 ” 属 性 关键 帧 ， 将 “时 间 指 示 器 
移 至 0 秒 20 帧 的 位 置 ， 设 置 “ 不 透明 度 ” 属 性 值 为 0% ，“ 时 间 轴 ”面板 如 图 5-169 所 示 。 选 择 “ 箭 
头 " 图 层 , 使 用 "向 后 平移 ( 锚 点 ) 工具 ”, 调整 该 图 层 的 锚 点 位 于 图 形 的 中 心 位 置 , 如 图 5-170 所 示 。 

三 将 “时 间 指 示 器 ” 移 至 0 秒 22 帧 的 位 置 ， 按 快捷 键 R， 显 示 该 图 层 的 “旋转 ”属性 ， 插 入 
该 属性 关键 帧 ， 如 图 5-171 所 示 。 将 “时 间 指 示 器 ” 移 至 1 秒 03 帧 的 位 置 ， 设 置 “ 旋 转 ”属性 值 
为 180"， 效 果 如 图 5-172 所 示 。 

世 将 “时 间 指 示 器 ” 移 至 0 秒 22 帧 的 位 置 ， 选 择 “ 半 圆 ”图 层 ， 按 快捷 键 T， 显 示 该 图 层 的 
“不 透明 度 ” 属 性 ， 插 入 该 属性 关键 帧 ， 如 图 5-173 所 示 。 将 “时 间 指 示 器 ” 移 至 1 秒 03 帧 的 位 置 ， 
设置 “不 透明 度 ” 属 性 值 为 0% ， 如 图 5-174 所 示 。 

0) 选择 “下 拉 形 状 ”图 层 ， 使 用 “向 后 平移 ( 锚 点 ) 工具 ”， 调 整 该 图 层 的 锚 点 位 于 图 形 的 中 
心 位 置 ， 如 图 5-175 所 示 。 执 行 “效果 ”> “扭曲 ”> CC Smear 命令 ， 应 用 CC Smear 效果 , 在 “ 合 
成 ”窗口 中 调整 该 效果 的 起 始点 和 结束 点 位 置 ， 如 图 5-176 所 示 。 
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图 5-169 图 5-170 


图 5-171 图 5-172 


图 5-173 


图 5-175 | 下 图 5-176 
闻 将 “时 间 指 示 器 ” 移 至 0 秒 22 帧 的 位 置 ， 为 CC Smear 效果 中 的 To 属性 插入 关键 帧 ， 如 


到 5-177 所 示 。 将 “时 间 指 示 器 ” 移 至 1 秒 19 帧 的 位 置 ， 在 “合成 ”窗口 中 移动 CC Smear 效果 的 
结束 点 位 置 ， 如 图 5-178 所 示 。 


上 


图 5-177 图 5.178 
于 选择 该 图 层 中 所 绘制 的 矩形 , 将 其 放大 , 保证 变形 后 的 图 形 不 漏 白 , 如 图 5-179 所 示 。 在 “ 效 
果 控 件 ” 面 板 中 对 CC Smear 效果 的 相关 属性 进行 设置 ， 从 而 得 到 满意 的 下 拉 形 状 效果 ， 如 图 5-180 


图 5-179 ! 轨 5-180 
五 ) 同时 选中 该 图 层 中 的 两 个 属性 关键 帧 , 按 快捷 键 F9, 为 其 应 用 " 缓 动 "效果 , 如 图 5-181 所 示 。 
单 击 “ 时 间 轴 ”面板 上 的 “图 表 编 辑 器 ”按钮 ， 切 换 到 图 表 编 辑 器 状态 ， 对 该 图 层 中 的 运动 曲线 进 
行 调整 ， 如 图 5-182 所 示 。 


图 5-181 图 5-182 
可 时 间 轴 状态 , 将“ 时间 指 示 器 " 移 至 1 秒 03 帧 的 位 置 , 选择 “内 容 ” 图 层 , 按 快捷 键 P， 
显示 该 图 层 的 “位 置 ” 属 性 ， 插 入 该 属性 关键 帧 ， 如 图 5-183 所 示 。 将 “时 间 指 示 器 ” 移 至 1 秒 19 
帧 的 位 置 ， 将 该 图 层 中 的 内 容 向 左 水 平移 动 ， 如 图 5-184 所 示 。 
同时 选中 该 图 层 中 的 两 个 属性 关键 帧 , 按 快捷 键 F9, 为 其 应 用 " 缓 动 "效果 , 如 图 5-185 所 示 。 
击 “ 时 间 轴 ”面板 上 的 “图 表 编辑 器 ”按钮 ， 切 换 到 图 表 编辑 器 状态 ， 对 该 图 层 中 的 运动 曲线 进 
行 调整 ， 如 图 5-186 所 示 。 
了 返回 时 间 轴 状态 , 将 “时 间 指示 器 " 移 至 0 秒 22 帧 的 位 置 , 选择 "图标 1" 图 层 , 按 快捷 键 P， 
显示 该 图 层 的 “位 置 ” 属 性 ， 插 入 该 属性 关键 帧 ， 如 图 5-187 所 示 。 将 “时 间 指 示 器 ” 移 至 1 秒 21 
帧 的 位 置 ， 在 “合成 ”窗口 中 调整 该 图 标 至 合适 的 位 置 ， 如 图 5-188 所 示 。 
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图 5-185 图 5-186 


图 5-187 4| 5-188 


闻 将 “时 间 指示 器 ” 移 至 2 秒 的 位 置 ， 在 “合成 ”窗口 中 调整 该 图 标 至 合适 的 位 置 ， 如 
5-189 所 示 。 在 “合成 ”窗口 中 对 生成 的 运动 路 径 进行 适当 的 调整 ， 如 图 5-190 所 示 。 


图 5-189 图 5-190 


了 同时 选中 该 图 层 中 的 3 个 属性 关键 帧 ， 按 快捷 键 F9， 为 其 应 用 “ 缓 动 ”效果 ， 如 图 5-191 
所 示 。 单 击 “ 时 间 轴 ”面板 上 的 “图 表 编 辑 器 ”按钮 ， 切 换 到 图 表 编 辑 器 状态 ， 对 该 图 层 中 的 运动 
线 进行 调整 ， 如 图 5-192 所 示 。 


图 5-191 L 图 5-192 
根据 "图标 1" 图 层 相同 的 制作 方法 , 可 以 完成 "图标 2" 和 “图 标 3" 图 层 中 动画 效果 的 制作 ， 
“合成 ”窗口 效果 如 图 5-193 所 示 ，“ 时 间 轴 ”面板 如 图 5-194 所 示 。 


图 5-193 图 5-194 

现 完 成 工具 栏 下 拉 展 开动 画 的 制作 ， 接 下 来 制作 工具 栏 收回 的 动画 效果 。 将 “下 拉 形 状 ”区 
层 移 至 “箭头 ”图 层 的 下 方 ， 如 图 5-195 所 示 。 选 择 “ 光 标 ” 图 层 ， 将 “时 间 指 示 器 ” 移 至 2 秒 03 
页 的 位 置 ， 为 “不 透明 度 ”属性 添加 关键 帧 ， 如 图 5-196 所 示 。 


图 5-195 图 5-196 


芭 将 “时 间 指示 器 ” 移 至 2 秒 07 帧 的 位 置 ， 设 置 “不 透明 度 ”属性 值 为 50%， 效 果 如 
和 5-197 所 示 。 将 “时 间 指 示 器 ” 移 至 2 秒 15 帧 的 位 置 ， 设 置 “ 不 透明 度 ” 属 性 值 为 0%， 


如 图 5-198 所 示 。 


图 5-198 


n> 


加 将 “时 间 指示 器 ” 移 至 2 秒 21 帧 的 位 置 ， 选 择 “ 箭 头 ”图 层 ， 在 当前 位 置 添加 “旋转 ” 
属性 关键 帧 ， 如 图 5-199 所 示 。 将 “时 间 指 示 器 ” 移 至 3 秒 02 帧 的 位 置 ， 设 置 “ 旋 转 ” 属 性 值 为 


0?， 效 果 如 图 5-200 所 示 。 


图 5-199 E 

天 将 “时 间 指示 器 ” 移 至 2 秒 21 帧 的 位 置 ， 选 择 “下 拉 形 状 ” 图 层 ， 在 当前 位 置 添加 To 属 

性 关键 帧 , 如 图 5-201 所 示 。 选择 该 图 层 0 秒 22 帧 的 关键 帧 , 按 快 捷 键 Ctl+C 复制 , 将 “时 间 指 示 器 ” 
移 至 3 秒 23 帧 的 位 置 ， 按 快捷 键 Ctd+V 粘贴 ， 效 果 如 图 5-202 所 示 。 


加 5-201 图 5-202 

观 单 击 “ 时 间 轴 ”面板 上 的 “图 表 编 辑 器 ”按钮 ， 切 换 到 图 表 编辑 器 状态 ， 对 该 图 层 中 的 运 
动 曲线 进行 调整 ， 如 图 5-203 所 示 。 返 回 时 间 轴 状态 ， 将 “时 间 指 示 器 ” 移 至 3 秒 18 帧 的 位 置 ， 
选择 “半圆 ”图 层 ， 为 “不 透明 度 ” 属 性 添加 关键 帧 ， 如 图 5-204 所 示 。 


图 5-203 图 5-204 
王将 “时 间 指示 器 ” 移 至 3 秒 23 帧 的 位 置 ， 设 置 “不 透明 度 ”属性 值 为 100% ， 效 果 如 
和 5-205 所 示 。 将 “时 间 指 示 器 ” 移 至 2 秒 21 帧 的 位 置 ， 选 择 “内 容 ” 图 层 ， 为 “位 置 ” 属 性 添 
加 关键 帧 ， 如 图 5-206 所 示 。 
到 选择 该 图 层 1 秒 03 帧 的 关键 帧 ， 按 快捷 键 Ctt+C 复制 ， 将 “时 间 指 示 器 ” 移 至 3 秒 07 帧 
的 位 置 , 按 快捷 键 Ctrl+V 粘贴 , 效果 如 图 5-207 所 示 。 单 击 “ 时 间 轴 ”面板 上 的 “图 表 编辑 器 ”按钮 ， 
切换 到 图 表 编 辑 器 状态 ， 对 该 图 层 中 的 运动 曲线 进行 调整 ， 如 图 5-208 所 示 。 


人 


到 返回 时 间 轴 状态 ， 将 “时 间 指示 器 ” 移 至 2 秒 21 帧 的 位 置 ， 选择 ， 辐 标 3” 图 层 ， 为 “位 
置 ” 属 性 添加 关键 帧 ,如 图 5-209 所 示 。 选择 该 图 层 0 秒 22 的 关键 帧 ， 按 快 捷 键 Ctrl+C 复制 ,将 “时 
间 指 示 器 ” 移 至 3 秒 14 帧 的 位 置 ， 按 快捷 键 Ctl+V 粘贴 ， 效 果 如 图 5-210 所 示 。 


图 5209 图 5-210 

现在 “合成 ”窗口 中 对 图 标 返 回 的 运动 路 径 进行 调整 ， 如 图 5-211 所 示 。 单 击 “ 时 间 轴 ” 
面板 上 的 “图 表 编 辑 器 ”按钮 ， 切 换 到 图 表 编 辑 器 状态 ， 对 该 图 层 中 的 运动 曲线 进行 调整 ， 如 
妈 5-212 所 示 。 


图 5-211 图 5-212 


使 用 相同 的 制作 方法 ， 可 以 完成 “图 标 2” 和 “图 标 3” 这 两 个 图 层 中 动画 的 制作 ， 效 果 如 
加 使 用 相同 的 制作 方法 成 “图 书 个 动画 的 制作 ， 效 果 女 


到 5-213 所 示 ，“ 时 间 轴 ”面板 如 图 5-214 所 示 。 


图 5-213 图 5-214 
国 ) 在 “时 间 轴 ”面板 中 为 “图 标 1” “图标 2” 和 “图 标 3” 这 3 个 图 层 开启 “运动 模糊 ” 功 
能 ， 并 且 显 示 “ 状 态 栏 ”图 层 ， 如 图 5-215 所 示 。 展 开 各 图 层 所 设置 的 关键 帧 ， “时 间 轴 ”面板 如 
到 5-216 所 示 。 


图 5-215 图 5-216 


完成 该 下 拉 展 开工 具 栏 动 效 的 制作 , 单 击 “预览 " 面板 上 的 “播放 /停止 " 按 包 畏 , 可 以 在 “ 合 
成 ”窗口 中 预览 动画 效果 。 也 可 以 根据 前 面 介绍 的 泻 染 输出 方法 ， 将 该 动画 泻 染 输出 为 视频 文件 ， 
使 用 Photoshop 将 其 输出 为 GIF 格式 的 动画 ， 动 画 效 果 如 图 5-217 所 示 。 
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过 去 制作 工具 图 标 动感 展开 动 效 


本 实例 制作 一 个 工具 图 标 动感 展开 动 效 , 默认 情况 下 , 相关 的 功能 图 标 被 隐藏 在 特定 的 图 标 下方 ， 
当 用 户 在 界面 中 单 击 该 图 标 后 ， 隐 藏 的 工具 图 标 将 以 动画 的 形式 展开 显示 ， 展 开 过 程 中 伴随 着 图 标 
的 旋转 和 运动 模糊 效果 ， 使 界面 的 交互 动 效 表现 更 加 突出 。 具 体操 作 步 骤 可 扫描 二 维 码 看 电子 书 。 
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源 文 件 : 源 文件 \ 第 5 章 \5-3-3.aep 
视频 : 视频 \ 第 5 章 \5-3-3.mp4 


扫 码 看 电子 书 


[54 攻 文字 动 效 和 受 计 be 


文字 是 移动 端 界 面 设 计 中 重要 的 元 素 之 一 ， 随 着 如 今 设计 的 共 融 ， 设 计 的 边界 也 越 来 越 模糊 ， 
过 去 移动 端 静态 的 主题 文字 设计 遇 上 今天 的 时 尚 交互 设计 ， 使 原本 静止 的 文字 设计 动 了 起 来 。 
- 久子 世 ]XXHY 表 吉 筷 六 四 


文字 设计 在 以 往 UI 设计 中 经 常 提 及 的 是 字体 范式 ， 重 在 其 形 。 文 字 动 效 很 少 被 人 提 及 ， 一 来 是 
技术 限制 ， 二 来 是 设计 理念 ， 不 过 随 着 简约 设计 的 流行 趋势 如 果 能 够 让 文字 在 界面 中 “ 动 ”起 来 ， 
即使 是 简单 的 图 文 界面 也 会 立即 “ 活 ” 起 来 ， 带 给 用 户 一 种 别 样 的 视觉 体验 感 ， 如 图 5-218 所 示 。 


全 月 多 宰 不 辣 闫 色 的 几 人 并 关 图形 进行 组 合 ， 结 侣 对 文字 笔 宙 的 这 家 ， 使 文字 内 容 治 文字 的 正确 书写 笔 曾 过 浙 普 东 出， 
来 ， 并 且 显 示 的 过 程 中 这 些 多 和 色彩 的 几何 形状 在 画面 中 的 跳跃， 使 文字 整体 非常 欢快 ， 具 有 非常 强烈 的 表现 效果 。 
图 5-218 

文字 动 效 在 移动 端 界 面 设计 中 的 表现 优势 主要 体现 在 以 下 几 个 方面 

(1) 采用 动画 效果 的 文字 除了 看 起 来 漂亮 和 易 取悦 用 户 以 外 ， 也 解决 了 很 多 界面 上 的 实际 性 问题 。 
动画 文字 起 到 “传播 者 ”的 作用 ， 比 起 静态 文字 描述 ， 动 画 文字 能 使 内 容 表达 得 简洁 且 具 有 冲击 力 。 
(2) 运动 的 物体 可 吸引 人 的 注意 力 。 让 界面 中 的 主题 文字 动 起 来 ， 是 一 个 很 好 的 突出 表现 主题 的 
方式 ， 且 不 会 让 用 户 感觉 突 天 
(3) 文字 动画 能 够 在 定 程度 上 丰富 界 的 表现 力 ， 提 升 界面 的 设计 感 ， 使 界面 充满 活力 。 如 
图 5-219 所 示 为 一 组 文字 动 效 图 片 。 
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0 入 了 白色 与 红色 
显示 出 来 后 ， 曲 


必 十 
Ee 


的 曲线 状 图 形 动画 效果 ， 这 些 曲线 状 图 形 围绕 着 遮 曾 文字 进行 快速 地 转动 消散 ， 直 到 所 有 主题 
肖 失 ， 使 该 文字 动 效 的 表现 动感 十 足 。 ! 
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形 向 四 周 呈 放射 状 发 散 并 : 


5 常见 的 文字 动 效 表现 D 


文字 动画 的 第 


J 作 和 表现 方法 与 其 他 元 素 色 


第 5 章 制作 UI 元 素 交互 动 效 


CHENIIEYU 


画 的 表现 方法 类 似 ， 大 多 数 都 是 通过 对 文字 的 基础 属 


性 来 实现 的 ， 还 有 通过 对 文字 添加 蒙 版 或 添加 效果 来 实现 各 种 特殊 的 文字 动画 效果 ， 下 面向 读者 介 


绍 几 种 常见 的 文字 动画 表现 效果 。 


和 1. 基础 文字 动画 


最 简单 的 就 是 基础 的 文字 动画 效果 ， 基 ] 


F“ 文 字 ” 的 位 置 、 旋 转 、 缩 放 、 透 明度 、 填 充 和 描 边 


等 基础 属性 来 制作 关键 帧 动画 ， 可 以 逐 字 逐 词 制作 动画 ， 也 可 以 对 完整 的 一 句 文 本 内 容 来 制作 动画 ， 


灵活 运用 基础 属性 也 可 以 表现 出 丰富 的 动画 效果 ， 如 图 5-220 所 示 。 
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一 群 人 走 得 远 
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| 一 个 人 走 得 快 ,一 群 人 走 得 远 

! 一 个 人 走 得 快 ， 

| 这 是 一 个 基础 的 文字 动画 效果 ， 两 部 分 文字 分 别 从 左 例 和 底部 模糊 入 场 ， 通 过 文字 的 “ 阁 击 ”， 使 上 面 二 全 的 文字 翻 } 

Es Ne 
图 5-220 


2. 文字 这 雷动 画 。 


遮 罩 是 动画 4 


非常 常见 的 一 种 表现 形式 ， 在 文字 动画 中 也 不 例外 。 从 视觉 感官 上 来 说 ， 通 


过 简单 的 元 素 、 


FE 富 得 体 的 运动 设计 ， 营 造 的 冲击 力 清新 而 美好 。 


字 遮 淖 动 画 的 表现 形式 也 


非常 多 ， 但 需要 注意 的 是 ， 在 设计 文字 动画 时 ， 形 式 勿 大 于 内 容 ， 如 


动画 效果 。 


妈 5-221 所 示 为 文字 遮 罩 


After Effects CC 移动 网 站 UI 交互 动 效 设计 全 程 揭秘 
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! 这 是 一 个 文字 运动 遮 淖 动 画 效果 ， 通 过 一 个 矩形 图 形 在 界面 中 左右 移动 ， 每 移动 一 次 都 会 通过 遮 淖 的 形式 表现 出 新 的 
1 主题 文字 内 容 ， 最 后 使 用 遮 音 的 形式 使 主题 文字 内 容 消失 ， 从 而 实现 动画 的 循环 。 在 动画 的 处 理 过 程 中 适当 地 为 元 素 ; 
! 加 入 组 动 和 模糊 效果 ， 使 动画 的 表现 效果 更 加 自然 。 | 


随 着 智能 设备 的 兴起 ，“ 手 势 动画 ”也 随 之 大 热 。 这 里 所 说 的 与 手势 相 结合 的 文字 动画 指 的 是 
真正 的 手势 , 即 让 手势 参与 到 文字 动画 的 表现 中 来 , 简单 地 理解 , 也 就 是 在 文本 动画 的 基础 上 加 上 " 手 ” 
这 个 元 素 ， 如 图 5-222 所 示 。 


遇见 更 好 的 自己 遇见 更 好 的 自己 | 
园 BetterMe 园 BetterMe : 


~ 一 | 


遇见 更 好 的 自己 


rd 


| 这 是 二 个 与 手势 相 结合 的 文字 动画 效果 ， 通 过 人 物 的 手势 将 主题 文字 放置 在 场景 中 ， 并 且 通 过 手指 的 滑动 遮 晶 显 示 相 ， 
应 的 文字 内 容 ， 最 后 通过 人 物 的 抓 取 手势 ， 制 作出 主题 文字 整体 这 军 消 失 的 效果 。 将 文字 动画 与 人 物 操 作 手 势 相 结合 ， ; 
! 给 人 一 种 非常 新 奇 的 表现 效果 。 : 


4. 粒子 消散 动画 
将 文字 内 容 与 粒子 动画 相 结 合 可 以 制作 出 文字 的 粒子 消散 动画 效果 ， 能 够 给 人 很 强 的 视觉 冲击 


力 。 尤 其 是 在 After Effects 中 ， 利 用 各 种 粒子 插件 ， 如 Trapcode Particular 、Trapcode Form 等 ， 可 
以 表现 出 多 种 酷 炫 的 粒子 动画 效果 ， 如 图 5-223 所 示 。 


5 光 效 文字 动画 。 》 
在 文字 动画 的 表现 过 程 中 加 入 光 蛙 或 光线 的 效果 , 通过 交 时 或 光线 的 变换 从 而 表现 出 主题 文字 ， 
使 文字 效果 的 表现 更 加 富有 视 浊 冲击 力 ， 如 图 5-224 所 示 。 
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这 是 一 个 文字 粒子 消散 动画 效果 ， 主 题 文 字 转 变 为 细小 的 粒子 并 逐渐 扩散 ， 从 而 实现 转 场 ， 转 场 后 的 大 量 粒子 逐渐 聚 
集 形成 新 的 主题 文字 内 容 。 使 用 粒子 动画 的 方式 来 表现 文字 效果 ， 给 人 一 种 酷 炫 的 视觉 效果 。 


图 5-223 
2 - 
hett2rMe 
五 LA 
LA 
BetterMe BetterMe BetterMe 
顶风 更 + 很 自 己 风 见 更 好 便 本 的 自己 


这 是 一 个 光 效 文字 动画 效果 ， 通 过 光 尝 动画 与 文字 的 3D 翻转 相 结 合 来 表现 主题 文字 ， 视 觉 效 果 表现 强烈 ， 能 够 给 人 
带 来 较 强 的 视觉 冲击 力 。 


图 5-224 


这 里 要 说 的 路 径 不 是 给 文字 制作 路 径 动 画 ， 而 是 用 其 他 元 素 例如 线条 或 者 粒子 做 路 径 动画 ， 最 
后 以 “生成 ”的 形式 表现 出 主题 文字 内 容 。 这 种 基于 路 径 来 表现 的 文字 动画 效果 ， 可 以 使 文字 动画 
的 表现 效果 更 加 绚丽 ， 如 图 5-225 所 示 。 


Bette, 图 BetterMe 


这 是 一 个 路 径 生 成 动画 效果 ， 通 过 两 条 对 比 色彩 的 线条 围绕 圆 形 路 径 进行 运动 ， 并 逐渐 缩小 圆 形 路 径 范围 ， 最 终 形成 
强 光 点 ， 然 后 采用 庶 淖 的 形式 从 中 心 位 置 向 四 周 逐 渐 扩散 表现 出 主题 文字 内 容 ， 在 整个 动画 过 程 中 还 加 入 了 粒子 效果 ， 
使 文字 动画 的 表现 更 加 绚丽 多 彩 。 


图 5-225 
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7. 动态 文字 去 


在 文字 排版 中 ，“ 文 字 云 ”的 形式 越 来 越 受 到 大 家 的 喜欢 ， 那 么 ， 同 样 可 以 使 用 文字 云 的 形式 来 于 
现 文字 的 动画 效果 ， 既 能 表现 文字 内 容 ， 也 能 通过 文字 所 组 合 而 成 的 形状 表现 其 主题 如 图 5-226 所 示 。 


Re i 

-BM 其 长 [ = ; 键 词 内 容 从 各 个 方向 飞 入 组 | 

入 半 忆 < ;成 汽车 形状 图 形 ， 非 常生 动 | 
T 并 富有 个 性 。 


来 BM， 遇 见 更 好 的 自己 


图 5-226 


除了 以 上 所 介绍 的 这 几 种 常见 的 文字 动画 表现 形式 外 ， 还 有 许多 其 他 的 文字 动画 表现 效果 ， 但 是 当 我 们 仔细 进 
行 分 析 可 以 发 现 ， 这 些 文字 动画 效果 基本 上 都 是 通过 基本 动画 结合 遮 罩 或 一 些 特效 表现 出 来 的 ， 这 就 要 求 我 们 在 文 
字 动 画 的 制作 过 程 中 能 够 灵活 地 运用 各 种 基础 动画 表现 形式 


入 制作 手写 文字 动 效 ” @ 


手写 文字 动 效 是 一 种 非常 常见 的 文字 动 效 表现 形式 ， 搭 配 手写 字体 ， 能 够 表现 出 很 强 的 视觉 表 
现 效果 ， 适 用 于 表现 产品 的 主题 。 本 节 将 带领 读者 完成 一 个 手写 文字 动 效 的 制作 ， 在 该 动 效 的 制作 
过 程 中 主要 是 通过 遮 罩 与 “ 描 边 ”效果 相 结合 来 实现 文字 的 手写 效果 。 


实例 24 一 制作 手写 文字 动 效 © 


源 文件 ， 源 文件 \ 第 5 章 \5-4-3.aep 视频: 视频 \ 第 5 章 \5-4-3.mp4 

加) 在 After Effects 中 新 建 一 个 空白 的 项 目 , 执行 “合成 ” >“ 新 建 合成 ”命令 ， 
弹出 “合成 设置 " 对 话 框 , 对 相关 选项 进行 设置 , 如 图 5-227 所 示 。 单 击 “确定 " 按钮 ， 
新 建 全 成。 执行“ 文件 ” >“ 导入 ”> “文件 ”命令 ， 导 入 素材 “ 源 文件 \ 第 5 章 \ 素 材 \54301jpg 
和 54302.png”，“ 项 目 ” 面 板 如 图 5-228 所 示 。 


图 5-228 


es ff Ul 元 未 交互 细 效 


在 "项目" 面板 中 将 54301.jpg 素 材 拖 入 “时 间 轴 " 面板 中 , 将 该 图 层 锁定 , 如 图 5-229 所 示 。 
使 用 “ 横 排 文字 工具 ”， 在 “合成 ”窗口 中 单 击 并 输入 相应 的 文字 ， 在 “字符 ”面板 中 对 文字 的 相 
关 属 性 进行 设置 ， 如 图 5-230 所 示 。 


图 5-229 | 图 0 | 

在 “合成 ”窗口 中 选择 文字 ， 打 开 “ 对 齐 ” 面 板 ， 单 击 “ 水 平 对 齐 ” 和 “垂直 对 齐 ”按钮 ， 

对 齐 文字 ， 如 图 5-231 所 示 。 选 择 文字 图 层 ， 使 用 “钢笔 工具 ”， 在 “合成 ”窗口 中 沿 着 文字 笔画 
绘制 路 径 ， 如 图 5-232 所 示 。 


图 5-231 


Ds 


EE 提示 
的 正确 书写 笔画 来 绘制 路 径 ， en 


使 用 “钢笔 工具 ”治文 
路 径 绘制 在 文字 笔画 的 中 间 位 置 ， 


央行 “效果 ”>“ 生 成 ”>“ 描 边 ” 命 令 ， 为 文字 图 层 应 用 “ 描 边 ”效果 ， 在 “效果 控件 ” 
面板 中 设置 “画笔 大 小 ” 选项 , 设置 “绘画 样式 ” 选项 为 “显示 原始 图 像 ”， 如 图 5-233 所 示 。 在 “ 合 
成 ”窗口 中 可 以 看 到 当前 文字 的 效果 ， 如 图 5-234 所 示 。 
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OR ee cc sa us = 


py 
用 提示 
在 此 处 的 “效果 控件 ”面板 中 设置 “画笔 大 小 ”选项 时 ， 注 意 观察 “合成 ”窗口 中 的 描 边 效 果 ， 要 求 描 边 能 够 
完全 覆盖 文字 的 笔画 粗细 即 可 。 而 将 “绘画 样式 ”选项 设置 为 “显示 原始 图 像 ”， 是 因为 我 们 需要 通过 该 效果 来 制 
作 原 始 文字 的 手写 动画 效果 ， 而 这 里 所 设置 的 描 边 只 相当 于 文字 笔画 的 遮 单 。 


将 “时间 指示 器 " 移 至 起 始 位 置 , 展开 文字 图 层 中 “效果 ”选项 中 的 “ 描 边 " 选项 , 设置 “结束” 
属性 为 0%， 并 为 该 属性 插入 关键 帧 ,如 图 5-235 所 示 。 在 “合成 ”窗口 中 可 以 看 到 文字 被 完全 隐藏 ， 
只 显示 刚 绘制 的 笔画 路 径 ， 如 图 5-236 所 示 。 

选择 文字 图 层 ， 按 快捷 键 U， 在 其 下 方 只 显示 添加 了 关键 帧 的 属性 。 将 “时 间 指 示 器 ” 移 

3 秒 的 位 置 ， 设 置 “结束 ”属性 值 为 100%， 如 图 5-237 所 示 。 在 “合成 ”窗口 中 可 以 看 到 文字 
完全 显示 ， 如 图 5-238 所 示 。 
同时 选中 该 图 层 的 两 个 关键 帧 ， 按 快捷 键 F9， 为 选中 的 关键 帧 应 用 “ 缓 动 ”效果 ， 如 
5-239 所 示 。 在 “项 目 ” 面 板 中 将 54302.png 拖 入 “时 间 轴 ”面板 中 ， 在 “合成 ”窗口 中 将 该 素 
材 图 像 调整 到 合适 的 大 小 和 位 置 ， 如 图 5-240 所 示 。 


四 


图 5-235 


0:00:03:00 


图 5-237 图 5-238 
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选中 该 素材 图 像 ， 使 用 “钢笔 工具 ”， 在 “合成 ”窗口 中 沿 着 素材 笔画 绘制 路 径 ， 如 
辐 5-241 所 示 。 执行“ 效果 ”>“ 生 成 ”>“ 描 边 ”命令 ， 为 该 素材 图 层 应 用 “ 描 边 ”效果 ， 在 “ 效 
果 控 件 ” 面 板 中 设置 “画笔 大 小 ”选项 ， 设 置 “绘画 样式 ”选项 为 “显示 原始 图 像 ”， 如 图 5-242 
所 示 。 


图 5-241 图 5-242 

将 "时间 指示 器 " 移 至 3 秒 的 位 置 , 展开 该 素材 图 层 中 "效果" 选项 中 的 " 描 边 " 选项, 设置" 结 
束 ”属性 为 0% ， 并 为 该 属性 插入 关键 帧 ， 按 快捷 键 U， 在 其 下 方 只 显示 添加 了 关键 帧 的 属性 ， 如 图 
5-243 所 示 。 在 “合成 " 窗口 中 可 以 看 到 素材 图 像 被 完全 隐藏 , 只 显示 刚 绘 制 的 路 径 , 如 图 5-244 所 示 。 


图 5-243 图 5-244 
将 “时 间 指 示 器 ” 移 至 3 秒 18 帧 的 位 置 ， 设置 “结束 ”属性 值 为 100%， 如 图 5-245 所 示 。 
同时 选中 该 图 层 的 两 个 关键 帧 ， 按 快捷 键 F9， 为 选中 的 关键 帧 应 用 “ 缓 动 ”效果 ， 如 图 5-246 所 示 。 


图 5-245 图 5-246 


在 “时 间 轴 ”面板 中 同时 选中 文字 图 层 和 素材 图 像 图 层 , 如 图 5-247 所 示 。 执行 "图 层 " > " 预 
合成 ”命令 ， 弹 出 “ 预 合 成 ”对 话 框 ， 设 置 如 图 5-248 所 示 。 
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图 5-247 
单 击 “ 确 定 ” 按 钮 ， 将 同时 选中 的 图 层 创建 为 一 个 名 称 为 “手写 文字 动 效 ”的 预 合成 , 开 
启 该 图 导 的 3D 功能 ， 如 图 5-249 所 示 。 按 快捷 键 P， 显 示 该 图 层 的 “位 置 ” 属 性 ， 按 住 Alt 键 不 放 
单 击 “ 位 置 ”属性 前 的 “秒表 ”按钮 ， 显 示 表 达 式 输入 工作 区 ， 输 入 表达 式 ， 如 图 5-250 所 示 。 


0:00:03:00 
0:00;03:18 

"ea 多 
onea 虫 > . 


Sra = 


图 5-249 图 5-250 


本 


提示。 
此 处 为 “位 置 ” 属 性 添加 的 是 一 个 拌 动 表达 式 ， 使 文字 产生 拌 动 的 效果 。 拌 动 表达 式 的 语法 格式 为 wiggle(x,y)， 
拌 动 频率 为 每 秒 摇摆 x 次， 每 次 y 像素 


执行 “文件 ” >“ 导入 ”> “文件 ”命令 ， 导 入 视频 素材 “ 源 文件 \ 第 5 章 \ 素 材 \54303. 
mov”， 如 图 5-251 所 示 。 在“ 项目” 面板 中 将 刚 导入 的 视频 素材 拖 入 “时 间 轴 ”面板 中 ， 在“ 合成” 
窗口 中 将 该 视频 素材 调整 至 合适 的 大 小 和 位 置 ， 效 果 如 图 5-252 所 示 。 


0:00:04:22 


ofea ® 


图 5-251 图 5-252 

完成 手写 文字 动 效 的 制作 ， 单 击 “ 预 览 ”面板 上 的 “播放 /停止 ”按钮 国 ， 可 以 在 “合成 ” 
窗口 中 预览 动画 效果 。 也 可 以 根据 前 面 介绍 的 泻 染 输出 方法 ， 将 该 动画 泻 染 输出 为 视频 文件 ， 再 使 
Photoshop 将 其 输出 为 GIF 格式 的 动画 ， 动 画 效果 如 图 5-253 所 示 。 
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图 5-253 


制作 闪光 描 边 文字 动 效 


文字 动 效 除了 上 一 节 中 介绍 的 手写 文字 动 效 外 ， 还 可 以 通过 为 文字 添加 各 种 效果 ， 对 这 些 效 果 
的 相关 属性 进行 动画 的 制作 ， 从 而 实现 各 种 出 色 的 文字 动 效 。 在 本 节 中 将 带领 读者 完成 一 个 闪光 描 
边 文字 动 效 的 制作 ， 在 该 动 效 的 制作 过 程 中 通过 对 文字 创建 莹 版 ， 得 到 文字 的 轮廓 ， 为 文字 轮廓 应 
用 多 种 不 同 的 效果 ， 并 且 通 过 对 各 种 效果 属性 的 设置 从 而 实现 闪光 描 边 文字 动 效 。 具 体操 作 步 骤 可 
扫描 二 维 码 看 电子 书 。 


实例 25 一 制作 闪光 描 边 文字 动 效 。 全 


源 文件 ， 源 文件 \ 第 5 章 \5-4-4.aep 
视频 : 视频 \ 第 5 章 \5-4-4.mp4 


EUR 
扫 码 看 电子 书 


Logo 动 效 设计 5 


随 着 动态 效果 在 UI 界面 中 的 应 用 越 来 越 广泛 , 许多 产品 Logo 也 开始 使 用 动态 的 方式 进行 表现 ， 
让 传统 的 静态 Logo 动 起 来 ， 转 化 成 为 一 种 全 新 的 、 新 颖 的 设计 元 素 ， 能 够 以 新 颖 的 方式 传递 品牌 形 
象 ， 给 用 户 留 下 深刻 的 印象 。 


动态 Logo 概述 
Logo 是 品牌 识别 的 核心 ， 这 一 点 是 毋庸 置疑 的 。 一 个 公司 或 者 团队 的 气质 ， 很 多 时 候 是 通过 


Logo 呈现 出 来 的 。 在 品牌 战略 当中 ，Logo 始终 是 绕 不 开 的 关键 。 一 个 设计 足够 优秀 突出 的 Logo， 

能 够 和 用 户 、 受 众 产生 联系 ， 甚 至 能 够 蕴含 品牌 故事 在 里 面 。 好 的 Logo 设计 ， 能 够 帮助 企业 建立 起 

足够 有 效 的 品牌 形象 ， 成 为 成 功 营销 的 基础 。 
传统 的 Logo 都 是 静态 的 表现 方式 ， 而 动态 效果 的 出 现 ， 使 Logo 拥有 了 更 多 的 可 能 性 。 
当 使 用 动态 效果 来 表现 Logo 时 ， 程 度 不 同 ， 所 呈现 出 的 样子 自然 也 不 尽 相同 ， 它 可 以 是 短 而 微 


国 E Effects CC 移动 网 站 UI 交互 动 效 设 计 全 程 揭秘 


妙 的 变化 ， 也 可 以 是 一 段 完整 的 短视 频 展 示 。 一 个 企业 和 一 个 创意 团队 会 根据 业务 目标 和 他 们 想 要 
为 用 户 展示 的 内 容 类 型 ， 来 选择 在 Logo 上 附加 哪 种 动 效 ， 以 及 展示 多 长 时 间 。 如 图 5-254 所 示 为 
Logo 动 效 。 


| 该 Logo 动 效 的 表现 非常 丰富 ， 开 始 是 火 苦 的 缩 这 滚动 ， 接 着 火苗 变形 并 散 开 形成 一 个 贺 球 ， 辑 球 弹跳 并 逐 浙 变 形 为 ; 
一 个 图 角 和 矩形， 在 该 图 角 和 矩形 内 容 色彩 来 回 变化 ， 并 逐渐 形成 该 Logo 图 标 ， 而 Logo 文字 则 采用 了 这 蛙 的 方式 ， 在 ; 
形成 Logo 图 标的 过 程 中 和 逐渐 显示 Logo 文字 ， 整 体 表现 效果 现代 、 动 感 ， 给 人 带 来 强烈 的 愉悦 感 ] 


图 5-254 
现 如 今 的 动画 设计 工具 让 动态 效果 的 设计 过 程 更 加 便捷 和 开放 ， 更 重要 的 是 ， 这 些 工具 让 设计 
过 程 更 为 清晰 、 直 观 ， 即 使 是 平面 设计 师 都 可 以 轻松 设计 动画 效果 。 如 果 一 个 品牌 需要 呈现 出 比较 
复杂 的 动画 效果 ， 那么 还 是 需要 掌握 动画 设计 的 专业 知识 和 熟练 地 运用 动画 设计 软件 。 如 图 5-255 


:该 Logo 的 
ee Logo 的 


RE 鞠 5 京介 作 U1 元 来 交互 芭 交 


发 


动态 Logo 是 一 种 更 为 现代 、 更 为 动态 的 品牌 呈现 方式 ， 它 和 传统 静态 Logo 一 样 可 以 勾勒 企 
和 公司 的 形象 ， 吸 引用 户 和 客户 的 注意 力 。 相 比 之 下 ， 动 态 Logo 对 于 设计 师 的 原创 性 要 求 更 高 ， 而 
这 无 疑 是 让 品牌 在 当前 竞争 中 脱颖而出 的 好 办 法 。 动 态 Logo 的 优势 还 表现 在 以 下 几 个 方面 。 


许多 同行 业 的 品牌 ， 在 Logo 的 设计 上 有 很 多 相似 之 处 ， 这 种 现象 很 常见 ， 因 为 在 设计 品牌 
Logo 的 过 程 中 总 是 需要 在 Logo 中 加 入 一 些 该 行业 的 所 特有 的 元 素 ， 这 些 元 素 和 他 们 的 行业 、 特 质 
有 着 密切 的 关系 ， 这 就 不 可 避免 地 导致 同行 业 中 不 同 品牌 的 Logo 会 出 现 相似 的 地 方 。 

为 了 让 Logo 具有 一 定 的 独特 性 ， 设 计 师 可 以 让 它 动 起 来 。 当 Logo 变 为 动态 ， 设 计 师 就 可 以 充 
运用 自己 的 想象 力 ， 当 原创 的 视觉 形象 和 动态 效果 相遇 的 时 候 ， 能 让 用 户 以 一 种 全 新 的 方式 来 感 


知 它们 ， 如 图 5-256 所 示 。 


| 这 是 知名 的 体育 运动 品牌 Nike 的 一 款 动态 Logo， 在 该 Logo 的 设计 和 表现 过 程 中 ， 动 效 的 表现 并 不 是 其 重点 ， 
! 是 通过 图 形 与 色彩 的 设计 ， 使 Logo 的 表现 富有 很 强 的 运动 感 和 现代 感 ， 而 在 Logo 中 加 入 闪电 围绕 标志 图 形 运 动 
! 动 效 ， 起 到 了 画龙点睛 的 作用 ， 使 Logo 的 表现 更 加 动感 。 


许多 品牌 专家 认为 ， 动 态 图 形 比 静态 的 图 像 更 容易 被 用 户 所 理解 ， 也 更 容易 被 记 住 。 一 个 强大 
的 动态 Logo 能 够 更 好 地 吸引 潜在 用 户 的 注意 力 。 一 些 动态 Logo 的 动画 效果 会 持续 10 秒 左右 ， 和 
短 时 间 内 看 到 一 个 静态 Logo 相 比 ， 被 用 户 记 住 的 概率 大 了 很 多 ， 如 图 5-257 所 示 。 


产品 留 给 用 户 的 第 一 印象 如 何 ， 其 实 有 着 很 深 的 影响 。 通 常 我 们 只 需要 几 秒 钟 就 决定 了 是 否 喜 
欢 某 个 事物 。 由 于 Logo 是 品牌 最 重要 的 代表 ， 而 潜在 用 户 对 品牌 产生 第 一 印象 与 Logo 有 着 颇 为 密 
切 的 关系 。 原 创 的 Logo 设计 通常 能 够 让 用 户 有 更 多 的 惊喜 和 更 为 深刻 的 印象 ， 积 极 向 上 的 第 一 印象 
会 更 吸引 用 户 持续 关注 下 去 。 


187 


;这 是 知名 的 谷歌 旗下 谷歌 应 用 
:商店 的 动态 Logo 设计 ， 通 过 
; 三 角形 图 形 的 变换 、 旋 转 等 动 ; 
画 形式 ,表现 出 欢乐 与 愉悦 感 ， 
动态 的 表现 效果 使 品牌 形式 的 
表现 更 加 鲜明 。 


(Noole 


bp Bb Bb 


Google play Goosle pla Gooale 


图 5-257 
用 户 喜欢 新 鲜 有 趣 和 不 同 寻 常 的 想法 ， 所 以 这 样 的 Logo 更 容易 带 来 惊喜 。 一 个 有 趣 的 动态 
Logo 能 够 让 人 喜悦 、 兴 奋 ， 触 发 用 户 不 同 的 情感 。 当 一 个 Logo 能 够 给 用 户 带 来 积极 情绪 的 时 候 ， 
博 联系 起 来 ， 如 图 5-258 和 图 5-259 所 示 。 


就 能 够 给 用 户 留 下 深刻 的 印象 ， 并 且 将 它 和 快乐 


是 给 人 留 下 深刻 的 


企业 Logo 同样 是 以 文 | 
1 字 的 表现 形式 为 主 ， 在 该 | 
go 的 动 效 设计 中 主要 ， 
是 通过 位 置 和 缩放 等 基本 ， 
性 的 变化 结合 文字 的 手 
庶 军 方式 来 表现 。 首 先 ! 
Logo 背景 的 旋转 放大 ，! 
入 场 ， 接 着 是 通过 遮 罩 的 ， 
式 表 现 Logo 文字 的 手 | 
效果 ， 最 终 显示 完整 的 ; 


1 流畅、 自然 。 


CC ii ms Murase 
4. 呈现 故事 2 


和 静态 的 Logo 不 同 , 动态 Logo 能 够 呈现 的 不 仅仅 是 特效 , 甚至 可 以 呈现 出 这 个 企业 的 业务 特质 ， 
甚至 一 个 简短 的 故事 。 它 可 以 成 为 产品 或 公司 独 有 故事 的 载体 ， 在 这 个 基础 上 ， 也 能 够 与 用 户 更 好 
地 建立 情感 联系 。 


池上 0go 动 效 需要 注意 的 问题 


动态 Logo 常常 被 用 来 宣传 ， 它 有 助 于 给 用 户 留 下 更 为 深刻 的 印象 ， 提 升 品牌 知名 度 ， 改 善 品牌 
故事 的 呈现 ， 创 造 更 为 有 效 的 企业 形象 。 不 过 ， 在 设计 创作 动态 Logo 的 过 程 中 还 要 注意 以 下 几 个 方 
的 问题 。 
(1) 在 设计 动态 Logo 之 前 ， 注 意 分 析 企 业 的 业务 目标 ， 并 且 有 针对 性 地 呈现 出 品牌 的 个 性 。 
(2) 通过 用 户 调研 ， 尽 量 使 所 设计 的 动态 Logo 更 加 贴 合用 户 的 喜好 。 
(3) 动态 Logo 要 让 用 户 感到 惊讶 或 者 兴奋 ， 如 果 动 态 效果 在 下 一 秒 就 被 用 户 预知 到 了 ， 对 用 户 
而 言 就 失去 了 惊喜 。 
分 保持 简约 , 尽量 不 要 制作 过 于 复杂 的 动态 效果 , 并 且 让 动态 Logo 的 动画 时 长 控制 在 10 秒 以 内 。 


2 制作 动感 模糊 Logo 动 效 


Logo 是 一 个 品牌 形象 的 象征 ， 动 态 Logo 的 视觉 表现 效果 更 加 强烈 、 突 出 。 本 节 将 带领 读者 完 
成 一 个 动感 模糊 Logo 动 效 的 制作 ， 在 该 动 效 的 制作 过 程 中 ， 主 要 通过 为 Logo 图 形 添加 CC Radial 
Fast Blur 效果 ， 并 对 该 效果 的 相关 属性 进行 设置 ， 从 而 实现 动感 模糊 的 Logo 动 效 表 现 。 具 体操 作 步 
了 骤 可 扫描 二 维 码 看 电子 书 。 


实例 26 一 制作 动感 模 关 Logo 动 效 ” 八 ) 


源 文件 ， 源 文件 \ 第 5 章 \5-5-4.aep 
视频 , 视频 \ 第 5 章 \5-5-4.mp4 


ns: 
所 码 看 电子 书 


于 汪汪 制作 动感 切片 Logo 动 效 


在 After Effects 中 通过 为 元 素 添加 不 同 的 效果 ， 并 对 效果 属性 进行 设置 ， 能 够 实现 各 种 不 同 的 
动画 效果 。 本 节 将 带领 读者 完成 一 个 动感 切片 Logo 动 效 的 制作 ， 在 该 动 效 的 制作 过 程 中 ， 通 过 “时 
间 置 换 ” 效 果实 现 Logo 图 形 被 切割 成 多 个 矩 形 ， 结 合 Logo 图 形 位 置 移动 ， 实 现 被 切割 后 的 多 个 矩 
形 产生 不 同时 间 的 位 移动 画 ， 表 现 效果 突出 。 


实例 27 一 制作 动感 切片 Logo 动 效 ” 八 ) 


源 文件 : 源 文件 \ 第 5 章 \5-5-5.aep ”视频 : 视频 \ 第 5 章 \5-5-5.mp4 

到 在 After Effects 中 新 建 一 个 空白 的 项 目 ， 执 行 “ 文 件 >“ 导入 ”> “ 文 
件 ” 命 令 ， 在 弹出 的 “导入 文件 ”对 话 框 中 选择 “ 源 文件 \ 第 5 章 \ 素 材 \55501. 
psd”， 如 图 5-260 所 示 。 弹 出 设置 对 话 框 ， 设 置 如 图 5-261 所 示 。 

六 单 击 “ 确 定 ” 按 钮 ， 导 入 PSD 素材 自动 生成 合成 ， 如 图 5-262 所 示 。 在 “项 目 ” 面 板 的 合 
成 上 右 击 ， 在 弹出 的 菜单 中 选择 “合成 设置 ”命令 ,设置 “持续 时 间 ” 为 5 秒 ， 如 图 5-263 所 示 ， 
单 击 “ 确 定 ” 按 钮 ， 完 成 “合成 设置 ”对 话 框 的 设置 。 
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国 s 2 


| 让 < 洒 文 件 ， 千 3 宇 杂 时 


[ER 作 fiprpraire ” 


Ce 


图 5-261 


图 5-260 


司 5-263 
该 合成 ， 在 “时 间 轴 ”了 
时 选择 “Logo 图 标 
5-265 所 示 。 


面板 


图 5-262 


ph 自动 生成 的 合成 ， 在 “合成 ”窗口 中 打 玫 
5-264 所 示 。 将 “背景 ”图 层 锁定 ， 同 
层 下 方 显示 “位 置 ”属性 ， 页 


双击 “项 目 ” 面 板 d 
中 可 以 看 到 该 合成 中 相应 的 图 层 ， 如 医 
和 “Logo 文字 ”图 层 ， 按 快捷 键 P， 在 这 两 个 医 


0:00:00:00 


opea6 时 称 外 
or 


7 加 >: DETTE * 
ES 从 


名 9 


图 5-265 


县 插入 “位 置 ， 
将 这 两 个 


”属性 关键 帧 ， 如 
芭 层 中 的 元 


图 5-264 
将 “时 间 指 示 器 ” 移 至 2 秒 的 位 置 ， 分 别 为 这 两 个 
5-266 所 示 。 将 “时 间 指 示 器 ” 移 至 1 秒 04 帧 的 位 置 ， 在 “合成 ”窗口 d 


素 向 上 移 至 合适 的 位 置 ， 如 


5-267 所 示 。 
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EE 


将 时 
当前 位 置 添加 关 


图 5-266 


图 5-267 


间 指 示 器 ” 移 至 3 秒 的 位 置 ， 单 击 这 两 个 医 


层 前 的 “添加 或 删除 关键 帧 ”图 标 ， 在 


键 帧 ， 如 图 5-268 所 示 。 将 “时 间 指 示 器 ” 移 至 3 秒 20 帧 的 位 置 ， 在 “合成 ” 窗 


口中 将 这 两 个 区 


层 中 的 元 素 向 下 移 至 合适 的 位 置 ， 如 图 5-269 所 示 。 


图 5-268 


同时 选 


如 图 5-270 所 示 。 选 择 “Logo 图 标 ” 图 层 ， 单 击 “ 时 间 轴 ” 
辐 表 编辑 器 模式 ， 如 图 5-271 所 示 。 


图 5-269 


中 这 两 个 图 层 中 的 所 有 属性 关键 帧 , 按 快捷 键 F9, 为 选中 的 关键 帧 应 用 


“ 缓 动 " 效果 ， 


7 板 上 的 “图 表 编辑 器 ”按钮 ， 切 换 到 


图 5-270 


对 该 图 


和 5-272 所 示 。 


层 中 元 素 的 运动 速率 曲线 进行 调整 ， 使 


图 5-271 


进入 时 先 快 后 慢 ， 移 | 


时 先 慢 后 快 ， 如 


选择 “Logo 文字 ”图 层 ， 使 用 相同 的 方法 ， 对 该 图 层 中 元 素 的 运动 速率 曲线 进行 相 


同 的 调整 ， 如 医 


9 


5 


返 


时 间 轴 编辑 状态 ， 同 时 选中 “Logo 图 标 " 


5-273 所 示 。 


图 5-272 


图 5-273 


到 层 十 


的 4 个 属性 关键 帧 ， 将 


其 向 后 移动 4 
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Ae 同 After Effects CC 移动 网 站 UI 交互 动 效 设计 全 程 揭秘 


帧 位 置 ， 从 而 实现 Logo 图 标 与 Logo 文字 之 间 的 时 间 差 ， 如 图 5-274 所 示 。 同 时 选中 “Logo 图 标 ” 
和 “Logo 文字 ”图 层 , 执行 “图 层 ”>“" 预 合成 ” 命令 , 弹出 “ 预 合成 ”对 话 框 , 设置 如 图 5-275 所 示 。 


图 5-274 图 5-275 
Eg 击 “确定 ”按钮 ,将 选中 的 图 层 创建 为 预 合成 , 如 图 5-276 所 示 。 选择 “Logo 动 效 ” 图 层 ， 
执行 "效果 " >“ 时 间 ”> “时间 置 换 ” 命 令 ， 为 其 添加 “时 间 置 换 ” 效 果 ， 在 “效果 控件 ”面板 中 
可 以 看 到 该 效果 的 相关 属性 选项 ， 如 图 5-277 所 示 。 


0:00:;03:20 


cea6 ® 轿 
i Dr 
6 > 图 : 僵 林 


图 5-276 图 5-277 
不 要 选择 任何 对 象 ， 使 用 “矩形 工具 ”， 设 置 “ 填 充 "为 白色 ，“ 描 边 " 为 无 ， 在 “合成 
窗口 中 绘制 一 个 和 矩形， 如 图 5-278 所 示 。 使 用 相同 的 制作 方法 ， 在 当前 的 形状 图 层 中 绘制 多 个 不 同 
宽度 、 不 同 灰 度 的 矩形， 效果 如 图 5-279 所 示 。 


此 处 所 绘制 的 矩形 ， 主 要 用 来 对 Logo 图 形 进行 切割 ， 每 一 个 矩形 都 可 以 通过 “时 间 置 换 ” 效 果 将 Logo 图 形 切 
割 成 相应 的 矩形 块 ， 而 矩形 的 色彩 只 能 够 选择 不 同 灰 度 的 色彩 ， 不 同 的 灰 度 在 “时 间 置 换 ” 效 果 中 可 以 映射 为 不 同 
人 


选择 “形状 图 层 1”， 执 行 “ 图 层 ”>“ 预 合成 ”命令 ， 弹 出 “ 预 合 成 ”对 话 框 ， 设 置 如 
到 5-280 所 示 。 单 击 “ 确 定 ”按钮 ， 将 该 图 层 创建 为 预 合成 ， 将 “切片 形状 ”图 层 移 至 “Logo 动 效 ” 
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妈 层 下方 ， 并 且 将 该 图 层 隐藏 ， 如 图 5-281 所 示 。 


0:00:00:00 


图 5-280 图 5-281 
选择 “Logo 动 效 ”图 层 ， 打 开 “ 效 果 控 件 ”面板 ， 对 该 图 层 中 所 添加 的 “时 间 置 换 ” 效 
果 的 相关 属性 进行 设置 ， 如 图 5-282 所 示 。 在 “时 间 轴 ”面板 中 拖 动 “时 间 指 示 器 ” 即 可 预览 到 该 
Logo 切片 动 效 的 效果 ， 如 图 5-283 所 示 。 


Boefing 


图 5-282 图 5-283 


提示 全 

在 “效果 控件 ” 
实现 的 切片 效果 i 
矩形 的 宽度 ， 从 而 实现 想 要 的 效果 


图 层 ” 选 项 设置 为 刚刚 绘制 了 多 个 灰 度 矩形 的 “切片 形状 ”图 层 ， 所 以 所 
有 关 。 如 果 读 者 感觉 切片 宽度 不 合适 ， 可 以 修改 “切片 形状 ”图 层 中 灰 度 


按 快捷 键 Ctrl+D， 原 位 复制 “Logo 动 效 ”图 层 ， 选择 下 方 的 “Logo 动 效 ” 图 层 ， 执 行 “ 效 
果 ”> “生成 ”> “填充 ”命令 ， 为 其 应 用 “填充 ”效果 ， 在 “效果 控件 ”面板 中 设置 “填充 ”效果 
中 的 “颜色 ”为 上 玫 FC000， 如 图 5-284 所 示 。 在 “时 间 轴 ”面板 中 将 该 图 层 中 的 内 容 向 后 移动 1 帧 
的 位 置 ， 如 图 5-285 所 示 。 


0:00:00:01 
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观 在 “时 间 轴 ”面板 中 拖 动 “ 时 间 指 示 器 ” 即 可 预览 到 为 该 Logo 图 形 添加 黄色 的 拖 影 装饰 的 
效果 ， 如 图 5-286 所 示 。 选 择 最 上 层 的 “Logo 动 效 ” 图 层 ,执行 “效果 ”> “透视 ”> “投影 ”命令 ， 
为 该 图 层 添加 “投影 ”效果 ， 在 “效果 控件 ”面板 中 对 “投影 ”效果 的 相关 属性 进行 设置 ， 效 果 如 


到 5-287 所 示 。 


图 5-286 加 图 5287 
完成 动感 切片 Logo 动 效 的 制作 , 单 击 “ 预 览 ” 面板 上 的 “播放 /停止 ”按钮 国 ， 可 以 在 “ 合 

成 ”窗口 中 预览 动画 效果 。 也 可 以 根据 前 面 介 绍 的 泻 染 输出 方法 ， 将 该 动画 泻 染 输出 为 视频 文件 ， 
使 用 Photoshop 将 其 输出 为 GIF 格式 的 动画 ， 动 画 效 果 如 图 5-288 所 示 。 
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6.1 国 动 效 设计 的 作用 与 常见 效果 


好 的 设计 是 显而易见 的 ， 而 优秀 的 设计 是 无 形 的。 一 个 优秀 的 UI 界面 动 效 可 以 使 该 App 应 
易 使 用 ， 并 且 能 够 有 效 吸引 用 户 的 眼球 ， 同 时 在 用 户 使 用 App 应 用 时 完全 不 会 被 动画 效果 分 心 。 


< 演 避 是 动 效 设计 的 人 f 
为 了 他 多 充分 地 理解 UI 界面 中 的 交互 动 效 设计 ， 首 先 必须 要 了 解 交互 动 效 在 App 应 用 中 的 定 
位 和 职责 。 


对 于 任何 用 户 界面 来 讲 ， 视 觉 反馈 都 是 至 关 重要 的 。 在 物理 世界 中 ， 我 们 与 物体 的 交互 是 伴随 

着 视觉 反馈 的 ， 同样 地 ， 人 们 期 待 从 UI 界面 中 得 到 一 个 类 似 的 效果 。UI 界面 需要 为 用 户 的 操作 提供 
党、 听觉 和 触觉 反馈 ， 使 用 户 感到 自己 在 操控 该 界面 ， 同 时 视觉 反馈 有 个 更 简单 的 用 途 : 它 暗示 
前 的 应 云 行 正常 。 当 个 按钮 在 放大 或 者 一 个 个 被 滑动 图 片 在 朝 着 正确 方向 移动 ， 那 么 很 
| 户 的 操作 ， 如 图 6-1 所 示 
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图 6-1 


这 种 交互 动 效 展示 出 当 用 户 在 UI 界面 中 与 某 个 元 素 交 互 时 ， 这 个 元 素 是 变化 的 ， 如 果 需 要 在 UI 
中 表现 一 个 元 素 功能 如 何 变 化 时 ， 这 种 动画 效果 是 最 好 的 选择 。 它 经 常 与 按钮 、 图 标 和 其 他 小 
如 果 6-2 所 示 。 


2 
设计 元 素 一 起 使 


| 大 该 音 界面 中 ， 当 用 户 单 击 界面 下 方 的 “录音 ”按钮 时 ， 该 按钮 会 分 离 出 3 个 功能 操作 按钮 ， 并 且 改 变 按钮 的 颜色 ， 


! 同 时 在 界面 中 出 现 声 纹 的 波形 动画 效果 ， 界 面 项 部 的 数字 开始 计时 ， 这 一 系列 的 动 效 设计 很 好 地 表现 出 界面 功能 的 变 
1 化， 流畅 地 切换 到 新 的 操作 功能 。 


3. 扩展 界面 空间 


大 部 分 的 移动 应 用 程序 都 有 非常 复杂 的 结构 ， 所 以 设计 师 需要 尽 可 能 地 简化 移动 应 用 程序 的 导 
航 。 对 于 这 项 任务 来 讲 ， 交 互动 效 的 应 用 是 非常 有 帮助 的 。 如 果 所 设计 的 交互 动 效 展示 出 了 元 素 被 
藏 在 哪里 ， 那 么 用 户 下 次 找 起 来 就 会 很 容易 了 ， 如 图 6-3 所 示 。 
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所 绑 定 的 多 张 银行 卡 | 


切换 ， 其 界 


交互 动 效 完美 地 表现 了 界面 的 某 些 部 分 和 阐明 了 是 怎样 与 它们 进行 交互 的 。 交 互动 效 中 每 个 元 
素 都 有 其 目的 和 定位 ， 例 如 ， 一 个 按钮 可 以 激活 弹出 菜单 ， 那 么 该 菜单 最 好 从 按钮 弹出 而 不 是 从 屏 
幕 侧面 滑 出 来 ， 这 样 就 会 展示 用 户 点 击 该 按钮 的 回应 ， 有 助 于 帮助 用 户 理解 这 两 个 元 素 ( 按钮 和 弹 
出 菜单 ) 是 有 联系 的 ， 如 图 6-4 所 示 。 


[入 
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滑动 时 ， 列 表 将 
扩展 的 方式 填充 整个 界面 ， 显 示 该 日 志 


图 6-4 
UI 界面 中 所 添加 的 动画 效果 都 应 该 能 够 表现 出 元 素 之 间 是 如 何 联系 的 ， 这 种 层次 结构 和 元 素 的 


交互 对 于 一 个 直观 的 界面 来 说 是 非常 重要 的 。 


如 果 某 一 款 移动 应 用 程序 中 的 元 素 间 有 不 可 预 估 的 交互 模式 时 ， 通 过 加 入 合适 的 动画 效果 为 
户 提供 视觉 线索 就 显得 非常 必要 了 ， 在 UI 界面 中 加 入 动画 效果 可 以 有 效 起 到 上 暗示 用 户 如 何 与 界面 元 
素 进行 交互 的 作用 ， 如 图 


的 1 


在 应 用 程序 的 运行 过 程 中 ， 总 会 有 几 个 进程 在 后 台 运 行 ,例如 从 服务 器 下 载 、 进 行 后 台 计算 等 ， 
在 UI 界面 的 设计 中 需要 让 用 户 知道 应 用 程序 并 没有 停止 运行 或 者 崩溃 ， 要 告诉 用 户 应 用 程序 正在 
好 地 运行 。 这 个 时 候 ， 通 常会 在 UI 界面 中 通过 动画 的 形式 来 表现 当前 的 应 用 程序 运行 状态 ， 通 过 视 
觉 符号 的 进度 给 用 户 一 种 控制 感 ， 如 图 6-6 所 示 。 


手机 图 标 条 回转 动 当 ; 
| 成 功 与 手机 连接 后 ， 在 | 
;手机 图 形 中 显示 相应 的 
| 打 勾 符号 ， 并 且 会 显示 | 
;相应 的 文字 提示 ， 接 着 ; 
;文字 提示 会 逐渐 变换 为 ; 
| 该 手机 的 相关 信息 。 通 | 
| 过 动 效 的 形式 表现 出 当 
前 的 系统 状态 ， 给 用 户 


手机 连接 成 功 


面 起 到 画龙点睛 的 作用 ， 独 特 的 动 效能 够 有 效 吸引 用 户 的 关 
注 ， 与 其 他 加 类型 的 用 程序 相 区 别 ， 从 而 使 该 应 用 程序 脱颖而出 。 独 特 而 富有 趣味 性 的 动 效 可 以 


;这 是 一 -个 界面 下 拉 刷 新 的 动 效 ， 当 用 户 向 下 拖 动 界面 时 ， 兰 弃 曾 上 上 广安 这 浙 出现 疾 直 图形 ， 在 下 方 则 会 出 现 蜡烛 图 形 ， 
| 随 着 界面 的 下 拉 ， 蜡烛 会 点 燃 鞭 炮 ， 从 而 完成 界面 中 内 容 的 刷新 ， 在 界面 最 上 方 出 现 新 的 内 容 ， 该 刷新 动 效 的 添加 ， 
| 为 整个 应 用 界面 带 来 趣味 性 ， 能 够 给 人 留 下 深刻 的 印象 


了 和 
草酸 尝 见 的 UI 界面 交互 动 效 仿 


UI 界面 动 效 设计 是 指 能 够 有 效 地 表达 页 面 或 者 内 容 之 间 的 逻辑 关系 ， 通 过 视觉 效果 直接 、 清 晰 
地 展示 用 户 UI 界面 中 操作 的 状态 。 通 过 动 效 的 应 用 能 够 为 用 户 提供 更 加 清晰 的 操作 指引 ， 表 现 出 界 
面 和 内 容 的 位 置 或 者 层级 关系 。 


在 本 节 中 将 向 读者 介绍 UI 界面 中 常见 的 多 种 交互 动 效 以 及 各 自 适用 的 场景 ， 供 读者 进行 参考 。 


ETD 


滚动 效果 是 指 根据 用 户 的 操作 手势 、 界 面 内 容 进行 滚动 操作 ， 该 动画 效果 非常 适 UI 界面 中 
列表 信息 的 查看 。 滚 动 交 互动 效 是 UI 界面 中 使 用 最 频繁 的 交互 动画 效果 ， 也 可 以 在 滚动 效果 的 基础 
上 加 入 一 些 其 他 的 动画 效果 ， 使 界面 的 交互 更 加 有 趣 和 丰富 。 如 图 6-8 所 示 为 滚动 动画 效果 在 UI 界 
中 的 应 用 。 
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图 6-8 
当 用 户 在 UI 界面 中 需要 进行 垂直 或 水 平滑 动 操作 时 ， 都 可 以 使 用 滚动 动画 效果 ， 例 如 界面 中 的 


列表 、 图 片 等 ， 很 多 场景 下 都 可 以 使 用 。 


当 一 张 图 片 在 有 限 的 屏幕 中 没有 办 法 被 完整 查看 的 时 候 , 就 可 以 在 界面 中 加 入 平移 的 交互 动 效 ， 
与 此 同时 ， 还 可 以 在 平移 的 基础 上 配合 放大 等 动画 效果 一 起 使 用 ， 从 而 使 界面 动画 的 表现 更 加 实用 。 
如 图 6-9 所 示 为 平移 动画 效果 在 UI 界面 中 的 应 用 。 


通常 在 一 些 界面 内 容 大 于 屏幕 的 界面 中 可 以 使 用 平移 动画 效果 ， 最 常见 的 就 是 地 图 应 用 。 


3. 扩大 弹出 效果 。 


中 的 内 容 会 从 缩 略 图 转换 为 全 屏 视图 ( 一 般 这 个 内 容 的 中 心 点 也 会 跟随 移动 到 屏幕 的 中 央 )， 
反 向 动画 效果 就 是 内 容 从 全 屏 视图 转换 为 缩 略 图 。 扩 大 弹出 动画 效果 的 优点 是 能 清楚 地 告诉 用 户 点 


了 FT 


击 的 地 方 被 放大 了 。 如 图 6-10 所 示 为 扩大 弹出 效果 在 UI 界面 中 的 应 用 。 


After Effects CC 移动 网 站 UI 交互 动 效 设计 全 程 揭 秘 
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图 6-10 


当 UI 界面 中 的 元 素 需 要 与 用 户 进行 单一 交互 的 时 候 ， 例 如 点 击 图 片 查看 详情 ， 就 可 以 使 用 扩大 


弹出 的 动画 效果 ， 使 转 场 过 渡 更 加 自然 。 


界面 元 素 在 点 击 之 后 缩小 ， 然 后 移动 到 屏幕 上 相应 的 位 置 ， 相 反 的 动 效 就 是 扩大 ， 从 某 个 图 
标 或 缩 略 图 重新 切换 为 全 屏 。 这 样 做 的 好 处 是 能 够 清楚 地 告诉 用 户 ， 最 小 化 的 元 素 可 以 在 哪里 被 
找到 ， 如 果 没有 动 效 的 引导 ， 可 能 用 户 需要 花 时 间 去 寻找 。 如 图 6-11 所 示 为 最 小 化 效果 在 UI 界 
面 中 的 应 用 。 


如 果 界 面 中 用 户 想 要 最 小 化 某 个 元 素 的 时 候 ， 例 如 搜索 、 快 捷 按钮 图 标 等 ， 这 些 地 方 都 可 以 使 
用 最 小 化 的 动画 效果 ， 符 合 从 哪 来 到 哪 去 的 原理 。 


了》 5. 标签 转换 效果 


标签 转换 动画 效果 是 指 根据 界面 中 内 容 的 切换 ， 标 签 按钮 相应 地 在 视觉 上 做 出 改变 ， 而 标题 是 
随 着 内 容 移动 而 改变 的 ， 这 样 能 够 清晰 地 展示 标签 和 内 容 之 间 的 从 属 关 系 ， 让 用 户 能 够 清晰 理解 界 
面 之 间 的 架构 。 如 图 6-12 为 标签 转换 动画 效果 在 UI 界面 中 的 应 用 。 

标签 转换 动 效 适用 于 同一 层级 界面 之 间 的 切换 ， 例 如 切换 导航 或 者 操作 进度 流程 。 在 UI 界面 中 
使 用 标签 切换 动画 效果 可 以 让 用 户 更 了 解 架构 ， 是 标签 而 不 是 按钮 的 感觉 。 


图 6-12 


6. 滑动 效果 

信息 列表 跟随 用 户 的 交互 手势 而 动 ， 然 后 再 回 到 相应 的 位 置 上 ， 保 持 页 面 整齐 ， 这 种 交互 动画 
属于 指向 型 动画 ， 内 容 的 滑动 取决 于 用 户 是 使 用 哪 种 手势 滑动 的 。 它 的 作用 就 是 通过 指向 型 转 场 ， 
有 效 帮 助 用 户 厘清 页 面 内 容 的 层级 排列 情况 。 如 图 6-13 所 示 为 滑动 效果 在 UI 界面 中 的 应 用 。 


图 6-13 
当 UI 界面 中 的 元 素 需 要 以 列表 的 方式 呈现 时 就 可 以 使 用 滑动 的 交互 动 效 , 例如 一 些 人 物 的 选择 、 


款式 的 选择 等 ， 都 适合 使 用 滑动 的 交互 动 效 方式 呈现 。 


7. 对 象 切换 效果 。 ” 》 


对 象 切换 动画 效果 是 指 当前 界面 移动 到 后 面 ， 新 的 界面 移动 到 前 面 ， 这 样 能 够 清楚 解释 界面 之 
间 是 进行 切换 的 , 不 会 显得 转换 太 突 元 和 莫名 其 妙 。 如 图 6-14 所 示 为 对 象 切 换 效果 在 UI 界面 中 的 应 用 。 


滑动 动画 效果 相对 来 说 比较 单一 和 常见 ， 使 用 对 象 切换 动画 效果 可 以 让 用 户 产生 眼前 一 亮 的 感 


觉 ， 常 被 于 一 些 商 品 图 片 的 切换 等 。 


界面 中 堆 受 在 一 起 的 元 素 被 展开 , 能 够 清楚 地 告诉 用 户 每 个 元 素 的 排列 情况 , 从 哪里 来 到 哪里 去 ， 
也 显得 更 加 有 趣 。 如 图 6-15 所 示 为 展开 推倒 动画 效果 在 UI 界面 中 的 应 用 。 
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图 6-15 
如 果 某 个 UI 界面 中 需要 展示 较 多 的 功能 选项 时 ， 可 以 使 用 展开 堆叠 的 动画 效果 。 例 如 一 个 功能 
中 隐藏 了 好 几 个 二 级 功能 时 ， 就 可 以 使 用 展开 堆 又 的 效果 ， 这 样 有 利于 引导 用 户 。 


翻 页 效果 是 指 当 用 户 在 UI 界面 中 实施 滑动 手势 的 时 候 ， 出 现 类 似 现实 生活 中 翻 页 一 样 的 动画 效 


果 。 翻 页 的 动画 效果 也 能 够 清晰 地 展现 列表 层级 的 信息 架构 ， 并 且 模 仿 现实 生活 中 的 动画 效果 ， 更 
加 富有 情感 国生 不 汶 秋 办 权 本 和 案 在 UI 界面 中 的 应 用 。 
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图 6-16 
翻 页 动画 效果 主要 应 当 用 户 进行 一 些 翻 页 操作 时 ， 例 如 看 小 说 、 读 长 篇 文章 等 ， 使 用 翻 页 
动画 效果 会 更 贴近 现实 生活 ， 引 起 用 户 共鸣 。 


融合 效果 是 指 UI 界面 中 的 元 素 会 根据 用 户 的 点 击 交互 而 分 离 或 者 是 结合 ， 用 户 可 以 感受 到 元 素 
与 元 素 之 间 的 关联 ， 比 起 直接 切换 ， 显 然 用 融合 动画 更 加 有 趣 。 如 图 6-17 所 示 为 融合 动画 效果 在 
UI 界面 中 的 应 用 。 
融合 动画 效果 适用 于 当 用 户 在 界面 中 操作 某 一 个 功能 图 标 时 可 能 会 触发 其 他 的 功能 ， 例 如 运动 
App 应 用 开始 健身 或 跑步 的 时 候 ， 点 击 开始 功能 图 标 会 同时 出 现 暂 停 和 结束 功能 操作 图 标 。 
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在 手机 充电 的 过 程 中 ， 我 们 可 以 通过 动 效 的 形式 为 充电 过 程 加 入 动态 的 表现 效果 ， 表 现 出 系统 
状态 ， 从 而 给 用 户 带 来 非常 直观 的 印象 。 本 节 将 带领 读者 完成 一 个 手机 充电 动 效 的 制作 ， 主 要 是 通 
过 “无 线 电波 ” “快速 方 框 模糊 ”和 “置换 图 ”效果 制作 出 波形 的 动 效 ， 接 着 通过 遮 章 来 限制 该 波 
形 动 效 的 显示 范围 ， 从 而 最 终 制作 出 该 手机 充电 动 效 。 
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源 文件 ， 源 文件 \ 第 6 章 \6-1-3.aep ”视频 视频 \ 第 6 章 \6-1-3.mp4 

RD 在 After Effects 中 新 建 一 个 空白 的 项 目 ， 执 行 “ 文 件 >“ 导入 ”> "文件 " 
命令 ， 导 入 素材 图 像 “ 源 文件 \ 第 6 章 \ 素 材 \61301.psd”， 弹 出 设置 对 话 框 ， 设 置 
如 图 6-18 所 示 。 单 击 “ 确 定 ” 按 钮 ， 导 入 该 PSD 格式 素材 ， 自 动 创建 相应 的 合成 ， 如 图 6-19 所 示 。 


图 6-18 图 6-19 
六 在 自动 创建 的 合成 上 右 击 ， 在 弹出 的 菜单 中 选择 “合成 设置 ”命令 ， 并 在 弹出 的 对 话 框 中 
对 相关 选项 进行 设置 ， 单 击 “ 确 定 ”按钮 ， 如 图 6-20 所 示 。 双 击 该 合成 ， 在 “合成 ”窗口 中 可 以 看 
到 该 合成 的 效果 ， 在 “时 间 轴 ”面板 中 将 “背景 ”和 “电池 图 标 ”这 两 个 图 层 锁定 ， 如 图 6-21 所 示 。 


0:00:00;00 


和 ea DH 


图 6-20 图 6-21 


A CEERI TE 


有 RB 执行 “合成 ”>“ 新 建 合成 ”命令 ， 弹 出 “合成 设置 ”对 话 框 ， 设 置 如 图 6-22 所 示 。 单 击 
“确定 ”按钮 ,创建 并 自动 进入 该 合成 的 编辑 状态 ,执行 “图 层 ”>“ 新 建 ”>“ 纯 色 ” 命令 , 弹出 “ 纯 
色 设 置 ” 对 话 框 ， 设 置 如 图 6-23 所 示 。 


图 6-22 


”按钮 ， 新建 纯 色 图 层 ， 如 图 6-24 所 示 。 执行“ 效果 ， >“ 生 成 ”> “无线电 
“无线 电波 ”效果 ， 对 该 效果 的 相关 选项 进行 设置 ， 如 图 6-25 所 示 。 


泪 " 


0:00:00:00 


图 6-24 图 6-25 
大 完成 “无 线 电波 ”效果 的 设置 ， 在 “时 间 轴 ”面板 中 拖 动 “ 时 间 指 示 器 ”， 在 “合成 ” 窗 
中 可 以 看 到 “无 线 电 波 ” 所 实现 的 效果 ， 如 图 6-26 所 示 。 执 行 “ 效 果 ”> “模糊 和 锐 化 ” > “ 快 
速 方 框 模糊 ”命令 ， 为 该 图 层 应 用 “快速 方 框 模糊 ”效果 ， 对 该 效果 的 相关 选项 进行 设置 ， 如 


妈 6-27 所 示 。 


图 6-27 
完成 “无 线 电 波 ” 效 果 的 设置 ， 在 “合成 ”窗口 中 可 以 看 到 相应 的 效果 ， 如 图 6-28 所 示 。 


合成 ”> “新 建 合成 ”命令 ， 弹 出 “合成 设置 ”对 话 框 ， 设 置 如 图 6-29 所 示 。 
三 单 击 “ 确 定 ” 按钮， 创建 并 自动 进入 该 合成 的 编辑 状态 ， 执 行 “ 图 层 ”> “新 建 ”> “纯色 ” 


党 
di 
o> 


命令 ， 弹 出 “纯色 设置 ”对 话 框 ， 设 置 如 图 6-30 所 示 。 单 击 “ 确 定 ”按钮 ， 新 建 纯色 图 层 ， 在 “ 合 
成 ”窗口 中 将 该 纯色 图 层 向 下 移 至 合适 的 位 置 ， 如 图 6-31 所 示 。 
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0:00:00:00 


ofea ® 


有 在 "项 


目 " 


面板 中 将 “灰色 "合成 拖 入 “ 


到 6-32 所 示 。 


选择 “青色 纯 


1 


琶 层 ， 执 行 “ 效 果 ”> “扭曲 ”> “置换 图 ”命令 ， 为 其 应 用 “置换 图 ”效果 ， 


对 该 效果 的 相关 选项 进行 设置 ， 如 图 6-33 所 示 。 


0:00:00:00 


| 此 处 需要 
| 添加 “置换 图 ” 


\ 


果 后 


ih ， 所 以 六 
， 对 “置换 图 ”效果 的 设置 中 最 重要 的 就 是 “置换 图 层 


示 ， 将 二 
的 设置 ， 需 


元 


“置换 图 ”效果 的 设置 , 在 “ 


对 间 轴 ”面板 中 拖 动 “时 间 指 示 器 ”， 在 “合成 ”窗口 


中 可 以 看 到 “置换 图 ”所 实现 的 效果 ， 如 图 6-34 所 示 。 执行 “效果 ”>“ 遮 曾 ”>“ 简 单 阻塞 工具 ” 
命令 ， 为 该 图 层 应 用 “简单 阻塞 工具 ”效果 ， 对 该 效果 的 相关 选项 进行 设置 ， 如 图 6-35 所 示 。 


了 10 返回 邓 


| 61301 合成 的 编辑 状态 中 ， 将 “波纹 效果 ”合成 拖 入 “时 间 轴 ”面板 中 ， 如 医 


6-36 所 示 。 在 


“合成 ”窗口 中 将 该 图 层 中 的 内 容 调整 至 合适 的 大 小 和 位 置 ， 如 图 6-37 所 示 。 
d 间 指示 器 ” 移 至 1 秒 05 帧 的 位 置 ， 选 择 “ 波 纹 效果 ”图 层 ， 按 快捷 键 P， 显 示 该 攻 


性 ， 为 该 属性 插入 关键 帧 ,如 图 6-38 所 示 。 将 “时 间 指 示 器 " 移 至 2 秒 10 帧 的 位 置 ， 


中 将 医 


形 向 上 移 至 合适 的 位 置 ， 如 图 6-39 所 示 。 
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图 6-34 图 6-35 


图 6-36 图 6-37 


0:00:01:05 


图 6-38 图 6-39 
卫 将 “时 间 指 示 器 " 移 至 3 秒 的 位 置 , 单 a 妈 层 “位 置 ” 属 性 前 的 “添加 或 移 除 关键 帧 " 按钮， 
添加 “位 置 ， 属性 关键 帧 ， 如 图 6-40 所 示 。 将 “ 时 间 指 示 器 ” 移 至 3 秒 22 帧 的 位 置 ， 在 “合成 ” 
窗口 中 将 图 形 向 上 移 至 合适 的 位 置 ， 如 图 6-41 所 示 。 


图 6-40 图 6-41 


本 同时 选中 该 图 层 中 的 4 个 关键 帧 ， 按 快捷 键 FB9， 为 其 应 用 “ 缓 动 ”效果 ， 如 图 6-42 所 示 。 


ES os urn 


hh 
迅 


辐 层 ， 在 该 图 层 的 


的 ， 
TrkMat 属性 下 拉 列 表 


ph 选 择 “Alpha 遮 址 “波纹 效果 ” ”选项 ， 如 医 


击 " 时 间 轴 "面板 左下 "展开 或 折叠 “转换 控制 ' 窗 格 "按钮 ,将 "波纹 效果 "图 层 隐藏 ,选择 “电量 ” 


6-43 所 示 。 


到) 在 “时 间 轴 "面板 


图 6-42 


图 6-43 


P 拖 动 “时 间 指 示 器 ”， 在 “合成 ”窗口 


P 可 以 看 到 


实现 的 动画 效果 ， 


如 图 


6-45 所 示 。 


6-44 所 示 。 选 择 “ 电 量 ” 


妈 层 ， 按 快捷 键 Ctt+D， 原 位 复制 该 医 


展 得 到 “ 


电量 2" 


妈 层 ， 如 区 


[3 选择 “电量 2” 


效果 如 医 
纹 效果 2”， 在 “合成 ”窗口 中 将 


6-46 所 示 。 在“ 项目 ”fi 


到 层 ， 按 快捷 键 T， 显 示 该 图 层 的 “不 透明 度 ” 属 性 ， 设 置 其 值 为 40%， 
板 中 将 “波纹 效果 ”合成 拖 入 “时 间 轴 ”面板 ， 将 其 重 命名 为 “ 波 


其 调整 到 合适 的 大 小 和 位 置 ， 如 图 6-47 所 示 。 


IB 选择 “波纹 效果 2" 图 层 ， 


图 6-46 


司 


6-47 


为 为 其 需要 实现 与 “波纹 效果 ”图 层 相 后 


里 可 以 设置 该 区 


择 “ 电 量 2” 


凤 层 ， 在 该 图 层 的 


和 6-49 所 示 。 


对 炭 沪 


实现 另 一 


的 向 上 移动 的 动画 效果 ， 


层 为 “波纹 效果 ”图 层 的 子 图 层 ， 如 图 6-48 所 示 。 将 “波纹 效果 2” 


妈 层 隐藏 ， 


TrkMat 属性 下 拉 列 表 中 选择 “Alpha 遮 站 “波纹 效 果 2”” 选 项 ， 


的 操作 处 理 方法 与 “电量 ”和 “波纹 效果 ” 
果 2” bh 的 图 形 大 小 和 位 置 的 时 候 ， 需要 与 “波纹 效果 ”图 
的 效果 。 


方法 完全 相同 ， 主 要 是 | 


~h 
马 


A FE 


图 6-48 图 6-49 


一 ) 完成 手机 充电 动 效 的 制作 ， 单 击 “ 预 览 ”面板 上 的 “播放 /停止 ”按钮 吓 ， 可 以 在 “合成 ” 
窗口 中 预览 动画 效果 。 也 可 以 根据 前 面 介绍 的 演 染 输出 方法 ， 将 该 动画 泻 染 输出 为 视频 文件 ， 再 使 
Photoshop 将 其 输出 为 GIF 格式 的 动画 ， 动 画 效 果 如 图 6-50 所 示 。 
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图 6-50 


著者 制作 手机 垃圾 清理 完成 动 效 

立 圾 清理 是 手机 中 非常 常见 的 一 种 应 用 功能 ， 在 垃圾 清理 过 程 中 加 入 动 效 的 表现 形式 ， 可 
以 非常 形象 地 表现 出 垃圾 清理 的 过 程 ， 在 垃圾 清理 完成 后 同样 可 以 加 入 相应 的 动 效 表现 ， 从 而 
使 界面 的 表现 更 加 富有 趣味 性 。 在 本 节 中 将 带领 读者 一 起 来 制作 一 个 手机 垃圾 清理 完成 的 动 效 ， 


主要 表现 为 小 火箭 升 空 消失 的 动画 效果 切换 出 相应 的 提示 文字 。 具 体操 作 步 骤 可 扫描 二 维 码 看 
电子 书 。 


源 文件 : 源 文件 \ 第 6 章 \6-1-4.aep 
视频 : 视频 \ 第 6 章 \6-1-4.mp4 


Py 


在 UI 设计 中 越 来 越 注重 细节 ， 而 等 待 和 加 载 动 效 几乎 在 应 用 程序 中 无 处 不 在 。 内 容 加 载 等 待 动 
画 效 果 几 乎 是 目前 网 站 和 移动 应 用 设计 中 都 无 法 绕 过 且 必 需 的 组 成 部 分 ， 它 们 不 仅 是 大 势 所 趋 ， 而 
且 是 打造 优秀 用 户 体验 的 必需 组 件 。 


区 学 到 了解 加 载 等 待 动 效 
根据 一 些 抽样 调查 ,浏览 者 倾向 于 认为 打开 速度 较 快 的 移动 应 用 质量 更 高 ， 更 可 信 ， 也 更 有 趣 。 
相应 地 ， 移 动 应 用 打开 速度 越 慢 ， 访 问 者 的 心理 挫折 感 越 强 ， 就 会 对 移动 应 用 的 可 信 性 和 质量 产生 


二 


CaS 
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怀疑 。 在 这 种 情况 下 ， 用 户 会 觉得 移动 应 用 的 后 台 可 能 出 现 了 一 种 错误 ， 因 为 在 很 长 一 段 时 间 内 ， 
他 没有 得 到 任何 提示 。 而 且 缓慢 的 打开 速度 会 让 用 户 忘 了 下 一 步 要 做 什么 ， 不 得 不 重新 回忆 ， 这 会 


进一步 恶化 用 户 的 使 用 体验 。 


移动 应 用 的 打开 速度 对 于 电子 商务 类 应 用 来 说 尤其 重要 ,页 面 载 人 的 速度 越 快 ,就 越 容 易 使 访问 者 变 成 你 的 客户 ， 
降低 客户 选择 商品 后 ， 最 后 却 放 弃 结 账 的 比例 。 


如 果 在 等 待 移动 应 用 加 载 期 间 ， 能 够 向 用 户 显示 反馈 信息 ， 比 如 一 个 加 载 进度 动画 ， 那 么 用 户 
的 等 待 时 间 会 相应 延长 。 如 图 6-51 所 示 为 加 载 等 待 动 效 。 


该 加 载 等 待 动 效 设计 了 一 个 不 断 弹跳 的 蛋糕 ， 界 面 表现 非常 有 趣 而 富有 动感 ， 当 用 户 在 等 待 界面 内 容 加 载 的 过 程 中 看 
| 
图 6-51 

虽然 目前 很 多 移动 应 用 产品 将 加 载 动画 作为 强化 用 户 第 一 印象 的 组 件 ， 但 是 它 的 实际 使 用 范畴 
远 不 止 于 这 一 部 分 ， 在 许多 设计 项 目 中 ， 加 载 动画 几乎 无 处 不 在 。 界 面 切换 的 时 候 可 以 使 用 ， 组 件 
加 载 的 时 候 可 以 使 用 ， 甚 至 幻灯 片 切换 的 时 候 也 同样 可 以 使 用 。 不 仅 如 此 ， 它 还 可 以 用 承载 数据 加 
载 的 过 程 ， 呈 现状 态 改变 的 过 程 ， 填 补 崩 溃 或 者 出 错 的 界面 ， 它 们 承前启后 ， 将 错误 和 等 待 转化 为 
令 用 户 愉悦 的 细节 ， 如 图 6-52 所 示 。 


列 


加 载 动 效 的 常见 表现 形式 ” 妈 
动 效 设计 是 大 势 所 趋 ， 加 载 动 效 也 是 其 中 的 重要 组 成 部 分 ， 它 在 用 户 体验 设计 中 的 作用 是 不 可 
估量 的 ， 它 让 折磨 人 的 等 待 变 成 了 愉悦 的 消遣。 下 面 将 向 读者 介绍 移动 端 常见 的 几 种 加 载 动 效 表现 


形式 。 


在 移动 端的 加 载 动画 效果 中 ， 最 常见 的 表现 形式 是 进度 条 ， 在 第 3 章 中 已 经 介绍 了 基础 的 
矩形 和 圆 形 进度 条 动 效 , 但 是 当 使 用 进度 条 来 表现 加 载 动 效 时 , 还 可 以 采用 更 加 有 趣 的 表现 手法 ， 
如 图 6-53 所 示 。 
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| 该 加 载 动画 采用 了 传统 的 进度 条 表现 广 ， 但 是 其 在 传统 进度 条 的 基础 上 0 了 图 形 的 庶 淖 动画 效果 ， 随 着 加 载 进 
! 度 的 变化 ， 进 度 条 上 方 的 卡通 房子 也 会 通过 遮 曙 的 方式 逐渐 显示 出 来 ， 丰 富 了 加 载 动画 的 表现 效果 。 


旋转 代表 时 间 的 流逝 , 暗示 着 时 钟 一 样 顺 时 针 旋转 。 不 停 循环 转动 的 动画 , 能 够 有 效 吸引 注意 力 ， 
给 用 户 时 间 加 速 的 错觉 ， 如 图 6-54 所 示 。 


是 某 移动 端 应 用 的 加 载 动 画 效 果 ， 将 圆 形 的 加 载 动 效 很 好 地 与 Logo 字母 相 结 合 ， 从 圆 形 的 旋转 变形 为 Logo 字母 ， ] 
从 Logo 字母 变形 为 圆 形 ， 从 而 形成 循环 的 动画 效果 ， 既 起 到 了 反馈 的 作用 ， 又 能 够 使 用 户 加 深 对 该 应 用 Logo 的 


3. 形象 动画 
如 果 在 界面 加 载 过 程 中 设计 一 个 形象 的 加 载 动画 ， 能 够 大 大 提高 产品 的 亲和力 和 品牌 识别 度 ， 
用 户 大 多 会 接受 并 喜欢 这 样 的 形式 ， 一 般 品牌 形象 明确 的 产品 会 这 么 做 ， 如 图 6-55 所 示 。 
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二 不 鹤 亿 奖 食 类 App 应 用 的 办 放疗 新 加 绕 动 并， 在 该 动 效 的 设计 中， 根据 该 App 应 用 的 类 型 ， 将 其 和 
守成 全 交代 和 非常 形象 、 直 观 ， 也 能 够 与 该 App 应 用 的 类 型 相 吻合 ， 这 样 的 加 载 动 效 设计 非常 有 趣 ， 又 符合 | 
1App 应 用 的 主题 。 : 


制作 简单 的 圆 环 加 载 动 效 
矩形 和 圆 环 是 最 基础 的 两 种 加 载 动 效 的 表现 形式 ， 表 现 效果 简洁 、 实 用 。 在 本 节 中 将 带领 读者 


一 起 来 完成 一 个 简单 的 圆 环 加 载 动 效 的 制作 ， 在 圆 环 加 载 动 效 的 制作 过 程 中 主要 是 使 用 “修剪 路 径 ” 
属性 与 “旋转 ”属性 相 结 合 ， 来 实现 圆 环 转动 的 动 效 表 现 。 


实例 30 一 一 制作 简单 的 圆 环 加 载 动 效 人 | 


源 文件 ， 源 文件 \ 第 6 章 \6-2-3.aep ”视频 : 视频 \ 第 6 章 \6-2-3.mp4 
现在 After Effects 中 新 建 一 个 空白 的 项 目 , 执行 “合成 ” >“ 新 建 合成 ”命令 ， 
弹出 “合成 设置 " 对 话 框 , 对 相关 选项 进行 设置 , 如 图 6-56 所 示 。 执行 “文件 ”>" 导 加 性 
入 ”> "文件 ”命令 ， 导 入 素材 图 像 “ 源 文件 \ 第 6 章 \ 素 材 \62301jpg”， 如 图 6-57 所 示 。 


图 6-56 图 6-57 


名 在 “项 目 ” 面板 中 将 62301.jpg 素材 拖 入 “时 间 轴 ” 面 板 中 ， 并 将 该 图 层 锁定 ， 如 
图 6-58 所 示 。 使 用 "类 圆 工具 ”， 在 工具 栏 中 设置 “填充 " 为 无 ，" 描 边 " 为 “线性 渐变 ”, 打开 ' 浙 
变 编辑 器 ”对 话 框 ， 设 置 措 边 的 渐变 颜色 ， 如 图 6-59 所 示 。 
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图 6-58 图 6-59 
从 单 击 “ 确 定 ” 按 钮 ， 完 成 描 边 渐变 颜色 的 设置 ， 设 置 “ 描 边 宽度 ”为 40 像素 ， 如 图 6-60 
所 示 。 在 “合成 ”窗口 中 ， 按 住 Shift 键 拖 动 鼠标 绘制 正 圆 环 图 形 ， 将 其 调整 到 合适 的 大 小 和 位 置 ， 
如 图 6-61 所 示 。 


图 6-60 


0:00:00:00 


图 6-61 
OD 单 击 “形状 图 层 1” 下方 “内 容 ” 选项 右 侧 的 “添加 ”按钮 ,在 弹出 的 菜单 中 选择 “修剪 路 径 ” 
选项 ， 添 放 “修剪 路 径 ”相关 属性 ， 将 “时 间 指 示 器 ” 移 至 0 秒 的 位 置 ， 为 “开始 ” “结束 ” 和 “ 偏 
移 ” 属性 插入 关键 帧 ,如 图 6-62 所 示 。 设置 “开始 ”属性 值 为 60%，“ 结 束 ”属性 值 为 50%, 在 “ 合 
成 ”窗口 中 可 以 看 到 圆 环 的 效果 ， 如 图 6-63 所 示 。 


图 6-62 


了 BB 展开 “形状 图 层 1” 下 方 的 “椭圆 1” 选 项 中 的 “渐变 描 边 1” 选 项 ， 设 置 “ 线 段 端点 ” 
属性 为 “ 圆 头 端点 ”， 如 图 6-64 所 示 。 在 “合成 ”窗口 中 可 以 看 到 圆 头 端点 的 效果 ， 如 图 6-65 


将 “时间 


图 6-64 


图 6-65 


指示 器 ” 移 至 1 秒 的 位 置 ， 对 添 力 


口中 可 以 看 到 圆 环 区 


形 的 效果 ， 如 图 6-66 所 示 。 将 


了 关键 帧 的 相关 属性 进行 设置 ， 在 “合成 ” 窗 


时 间 指 示 器 ” 移 至 2 秒 的 位 置 ， 对 添加 了 关键 


帧 的 相关 属性 进行 设置 ， 在 “合成 ”窗口 中 可 以 看 到 
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环 图 形 的 效果 ， 如 图 6-67 所 示 。 


六 将 “时 间 


图 6-66 


图 6-67 


口中 可 以 看 到 圆 环 


妈 形 的 效果 ， 如 图 6-68 所 示 。 将 


指示 器 ” 移 至 3 秒 的 位 置 ， 对 添 力 


了 关键 帧 的 相关 属性 进行 设置 ， 在 


“合成 ” 窗 


“时 间 指 示 器 ” 移 至 4 秒 的 


位 置 ， 对 添加 了 关键 


帧 的 相关 属性 进行 设置 ， 在 “合成 ”窗口 中 可 以 看 型 


了 将 “时 间 


| 6-68 


| 加 


图 6-69 


环 图 形 的 效果 ， 如 图 6-69 所 示 。 


站 示 器 ” 移 至 4 秒 23 帧 的 位 置 ， 对 添加 了 关键 帧 的 相关 属性 进行 设置 , 在 “合成 ” 


窗口 中 可 以 看 到 区 


环 图 形 的 效果 ， 如 图 6-70 所 示 。 


并 输入 相应 的 文字 


， 如 图 6-71 所 示 。 


使 


“ 横 排 文字 工具 ”， 


在 “合成 ”窗口 中 单 击 


D0o 9) 


将 该 文字 图 层 复制 多 次 ， 并 分 别 对 文字 医 


恨 中 的 内 容 进 行 修改 ， 每 个 文字 图 层 中 只 保留 一 


个 相应 的 字母 ， 如 


图 6-72 所 示 。 将 “时 间 指 示 器 ” 


示 该 图 层 的 “位 置 ” 


属性 ， 为 该 属性 插入 关键 帧 ， 


欧 至 0 秒 的 位 置 ， 选 择 上 
如 图 6-73 所 示 。 


层 ， 按 快 


捷 键 P， 显 


A FE 
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图 6-72 图 6-73 
鸡 ) 将 “时 间 指 示 器 ” 移 至 0 秒 05 帧 的 位 置 ， 在 “合成 ”窗口 中 将 字母 L 向 上 移动 ， 如 
区 6-74 所 示 。 将 “时 间 指 示 器 ” 移 至 0 秒 10 帧 的 位 置 ， 在 “合成 ”窗口 中 将 字母 L 向 下 移动 ， 如 
到 6-75 所 示 。 
台 同时 选中 该 图 层 的 3 个 属性 关键 帧 ， 按 快捷 键 Crl+C， 复 制 关 键 帧 ， 将 “时 间 指 示 器 ” 移 
至 1 秒 20 帧 的 位 置 ， 按 快捷 键 Cdt+V， 粘 贴 关 键 帧 ， 如 图 6-76 所 示 。 将 “时 间 指 示 器 ” 移 至 4 秒 
10 帧 的 位 置 ， 按 快捷 键 Ctt+V， 粘 贴 关键 帧 ， 如 图 6-77 所 示 。 


~oading 


-oading 
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图 6-75 


图 6-76 图 6-77 
了 使 用 相同 的 制作 方法 ， 可 以 完成 其 他 字母 图 层 中 动画 效果 的 制作 ， 注 意 每 个 字母 向 上 移动 
都 延迟 5 帧 ， 从 而 得 到 最 终 字母 逐个 向 上 运动 的 动画 效果 ，“ 时 间 轴 ”面板 如 图 6-78 所 示 。 


后 


ES 


图 6-78 

邢 ) 完成 该 圆 环 加 载 动 效 的 制作 , 单 击 “预览 ”面板 上 的 “播放 /停止 ”按钮 号 ， 可 以 在 “合成 ” 

窗口 中 预览 动画 效果 。 也 可 以 根据 前 面 介 绍 的 泻 染 输出 方法 ， 将 该 动画 泻 染 输出 为 视频 文件 ， 再 使 
Photoshop 将 其 输出 为 GIF 格式 的 动画 ， 动 画 效果 如 图 6-79 所 示 。 
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区 可 制作 界面 下 拉 刷 新 加 


当 在 App 应 用 中 对 该 界面 中 的 内 容 进行 下 拉 刷 新 操作 时 ， 多 数 App 应 用 都 会 在 下 拉 刷 新 操作 时 
为 用 户 提供 一 个 加 载 小 动 效 ， 从 而 为 用 户 提 供 有 效 的 提示 ， 也 为 App 应 用 带 来 乐趣 。 本 节 将 带领 读 
者 一 起 完成 一 个 界面 下 拉 刷 新 加 载 动 效 的 设计 制作 ， 在 该 动 效 中 主要 是 通过 “旋转 ”属性 和 形状 路 
径 的 变形 来 实现 加 载 动 效 的 效果 。 具 体操 作 步 骤 可 扫描 二 维 码 看 电子 书 。 


源 文件 ， 源 文件 \ 第 6 章 \6-2-4aep 
视频 视频 \ 第 6 章 \6-2-4.mp4 te 
扫 码 看 电子 书 


村 引导 界面 动 效 设计 
作为 设计 师 ,都 希望 自己 设计 的 产品 能 够 为 用 户 提供 良好 的 用 户 体验 。 对 于 移动 端的 应 用 程序 来 说 ， 
用 户 对 该 应 用 程序 的 第 一 印象 往往 来 源 于 该 应 用 的 引导 界面 。 第 一 印象 产生 的 时 间 极 短 ， 但 是 它 所 带 
来 的 影响 却 要 长 远 得 多 ， 所 以 移动 端 应 用 的 引导 界面 对 于 用 户 和 产品 之 间 纽 带 的 建立 是 十 分 重要 的 。 
[什么 是 引导 界面 
移动 端 应 用 软件 启动 时 ， 在 正式 进入 应 用 界面 之 前 ， 首 先 会 通过 几 个 引导 界面 向 用 户 介 绍 该 款 
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After Effects CC 移动 网 站 UI 交互 动 效 设计 全 程 揭秘 


移动 端 应 用 的 主要 功能 与 特色 ， 第 一 印象 的 好 坏 会 极 大 地 影响 到 后 续 的 产品 使 用 体验 。 人 们 在 尝试 
新 事物 的 过 程 中 会 产生 紧张 与 不 安 , 引导 界面 的 作用 就 是 短 时 间 内 让 用 户 对 这 款 产 品 有 大 概 的 了 解 ， 


Gali geigei Gali geigei sigei Gali geigei Gali geigei 
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1 
有 


! 内 容 。 但 是 每 个 引导 界面 中 的 文字 内 容 和 图 形 都 采用 了 动画 的 表现 形式 ， 使 界面 具有 很 好 的 表现 效果 ， 并 且 在 界面 中 | 
{ 左右 滑动 时 ， 会 以 动画 的 形式 切换 过 渡 到 另 一 个 引导 界面 中 ， 动 画 表现 效果 流畅 而 自然 ， 增 强 了 该 移动 应 用 的 趣味 性 。 


有 引导 界面 的 设计 要 素 。 @ 


不 同 的 移动 应 用 程序 有 着 不 同 的 核心 功能 和 目标 用 户 群 体 ， 其 引导 界面 的 框架 与 内 容 也 是 不 
样 的 。 但 是 每 一 款 移动 应 用 程序 的 用 户 体验 立足 点 却 是 相同 的 ， 即 用 户 需求 、 用 户 期 望 、 产 品 性 质 、 
经 营 目 标 。 引 导 界 面 作为 用 户 使 用 应 用 程序 的 出 发 点 ， 我 们 的 目标 是 以 一 种 动态 的 、 易 懂 的 和 有 吸 
引力 的 方式 告诉 用 户 这 款 应 用 程序 的 基本 信息 。 

移动 端 应 用 程序 的 引导 界面 通常 包含 3 ~ 5 个 界面 ， 每 个 界面 中 的 设计 元 素 主要 包括 图 片 、 文 
字 和 动画 。 


无 论 是 拍摄 的 照片 还 是 手绘 的 插画 都 可 以 完成 向 用 户 传递 信息 的 功能 ， 并 且 人 们 对 图 片 的 感知 
速度 要 比 文字 快 ， 所 以 在 引导 界面 中 合理 使 用 图 片 能 够 帮助 用 户 在 短 时 间 内 快速 获取 信息 。 引 导 界 
面 中 对 于 插画 的 要 求 不 是 很 高 ， 简 单 的 图 标 类 插画 也 同样 能 够 获得 很 好 的 效果 ， 并 且 插 画 对 于 年 轻 
用 户 群体 有 着 巨大 的 吸引 力 。 如 图 6-81 所 示 为 图 片 引导 界面 。 


! 在 该 引导 界面 的 设计 中 ， 使 用 简洁 的 浅 灰色 背景 搭配 统一 的 卡通 插画 风格 图 片 来 表现 各 引导 界面 中 的 内 容 主题 ， 表 现 
! 效 果 简 洁 、 主 题 突出 ， 很 好 地 体现 出 活动 给 人 带 来 的 悠闲 感 ， 给 人 感觉 活跃 而 富有 趣味 性 。 1 
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引导 界面 中 文字 要 足够 简明 扼要 , 降低 用 户 的 阅读 时 间 , 用 户 不 会 在 引导 界面 上 花费 很 多 时 间 ， 
他 们 不 可 能 一 字 一 句 去 读 ， 所 以 文字 要 尽量 短小 精 悍 ， 如 图 6-82 所 示 。 
:| "i 2 | 导 界面 主要 是 通过 主题 文字 的 


然 用 户 对 引导 界面 不 会 给 予 过 多 的 注意 力 ， 但 是 这 并 


不 意味 着 设计 师 可 以 降 1 


;设计 ， 从 而 突出 表现 该 App 应 月 
! 特 点 。 这 一 组 引导 界面 使 用 不 
;主题 背景 色 进行 区 别 ， 采 用 相 
;设计 风格 ， 都 使 用 了 纯色 搭配 
;文字 的 形式 来 突出 表现 主题 ， 每 个 
! 界 面 中 主题 文字 的 设计 非常 突出 
! 给 人 带 来 强烈 的 视觉 冲击 力 。 


' 


的 ， 
的 ! 


氏 对 引导 界面 的 


求 。 动 画 的 应 用 可 以 给 引导 界 


面 注入 生命 力 ， 增 加 界面 


活力 ， 有 趣 的 动画 可 以 很 好 地 娱 


提升 他 们 对 这 款 移 动 应 用 程序 的 期 望 值 。 引 导 界 
的 注意 力 吸引 过 来 ， 但 是 动画 另 一 方面 意味 着 更 多 
， 设计 师 应 该 和 开发 进行 深入 的 沟通 ， 务 必 达 到 


该 移动 端 应 用 的 引导 界面 设计 
! 过 动画 使 界面 能 够 更 加 吸引 用 户 的 


中 有 些 信息 是 比较 重要 的 ， 采 用 动 
的 加 载 负担 和 更 长 的 等 待 时 间 。 所 
最 优 的 实现 效果 ， 如 图 6-83 所 示 。 


图 片 等 元 素 之 外 ， 还 在 引导 界面 中 加 入 了 动画 的 表现 形式 ， 
应 用 给 人 一 种 独特 感 ， 


有 效 提高 了 引导 界面 的 吸引 力 。 


田 


引导 界面 是 用 户 与 该 移动 应 用 第 一 次 接触 ， 它 的 作用 相当 


用 


向 


户 进行 自我 介绍 和 问候 ， 许 多 


移动 端 应 用 App 都 会 设置 引导 界面 。 本 节 将 带领 读者 一 起 完成 
要 是 通过 位 置 移动 动画 来 实现 的 ， 但 需要 注意 通过 对 运动 速度 


WE 


线 的 


导 界 面 切换 动 效 的 制作 ， 
调整 ， 从 而 使 位 置 移动 的 


画 


表现 效果 更 加 真实 。 


kez 


Ae FE 


有 在 Photoshop 中 打开 一 个 设计 好 的 引导 界面 PSD 文件 “ 源 文件 \ 第 6 章 \、 民 keh 
素材 ,63301.psd”， 可 以 看 到 相关 的 图 层 ， 如 图 6-84 所 示 。 打 开 After Effects， 执 回环 
行 “ 文 件 ” >“ 导入 ”> “文件 ”命令 ， 在 弹出 的 “导入 文件 ”对 话 框 中 选择 该 PSD 素材 文件 ， 如 
图 6-85 所 示 。 


图 6-84 图 6-85 
观 单 击 " 导 入 ”按钮 ， 弹 出 设置 对 话 框 ， 设 置 如 图 6-86 所 示 。 单 击 “ 确 定 ” 按 钮 ， 导 入 
PSD 素材 并 自动 生成 合成 ， 如 图 6-87 所 示 。 


图 6-86 图 6-87 
RB 在“ 项目” 面板 中 的 63301 合成 上 右 击 ， 在 弹出 的 菜单 中 选择 “合成 设置 ”命令 , 弹出“ 合 
成 设置 ”对 话 框 , 设置 “持续 时 间 ” 为 8 秒 , 如 图 6-88 所 示 。 单 击 “确定 ”按钮 ， 完 成 对 话 框 的 设置 ， 
双击 63301 合成 , 在 “合成 ”窗口 中 打开 该 合成 , 在 “时 间 轴 ”面板 中 可 以 看 到 该 合成 中 相应 的 图 层 ， 
如 图 6-89 所 示 。 
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图 6-88 图 G89 


Et 


暂时 将 “引导 页 2” 和 “引导 页 3” 图 层 隐 藏 ， 选 择 “ 引 导 页 1” 图 层 ， 将 “时 间 指 示 器 ” 
移 至 0 秒 的 位 置 ， 按 快捷 键 P， 显 示 该 图 层 的 “位 置 ”属性 ， 插 入 该 属性 关键 帧 ， 如 图 6-90 所 示 。 
将 “时 间 指 示 器 ” 移 至 1 秒 的 位 置 ， 在 “合成 ”窗口 中 将 该 素材 向 左 水 平移 至 合适 的 位 置 ， 如 
到 6-91 所 示 。 


扫 6-90 图 6-91 


人 吨 同 时 选中 该 图 层 的 两 个 关键 帧 ， 按 快捷 键 F9， 为 所 选中 的 关键 帧 应 用 “ 缓 动 ”效果 ， 如 图 6-92 
所 示 。 单 击 “时 间 轴 ”面板 上 的 “图 表 编辑 器 ”按钮 图 ， 进 入 图 表 编辑 器 状态 ， 如 图 6-93 所 示 。 


图 6-92 图 6-93 
) 驳 单 击 运动 曲线 左 侧 的 锚 点 ， 拖 动 方向 线 调整 运动 速度 曲线 ， 如 图 6-94 所 示 。 再 次 单 击 “图 
表 编辑 器 ” 按 包 图， 返回 到 默认 状态 。 将 “时 间 指 示 器 ” 移 至 0 秒 的 位 置 ， 显 示 “ 引 导 页 2” 图 层 ， 
选择 该 图 层 ， 在 “合成 ”窗口 中 将 该 素材 调整 到 合适 的 位 置 ， 如 图 6-95 所 示 。 


此 处 对 该 图 层 中 的 素材 位 置 移 动 动画 的 运动 速度 曲线 进行 调整 ， 从 而 使 该 素材 向 左 移动 的 动画 能 够 实现 先 慢 后 
快 的 效果 


了 8D) 按 快捷 键 P， 显 示 该 图 层 的 “位 置 ”属性 ， 插 入 该 属性 关键 帧 ， 如 图 6-96 所 示 。 将 “时 间 
指示 器 ” 移 至 1 秒 的 位 置 ， 在 “合成 ”窗口 中 将 该 素材 向 左 水 平移 至 合适 的 位 置 ， 如 图 6-97 所 示 。 
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司 6-96 图 6-97 

XB 将 ' i 移 至 2 秒 的 位 置 ， 单 击 “ 位 置 ”属性 左 侧 的 “添加 或 移 除 关 键 帧 ”按钮 ， 
添加 关键 帧 ， 如 图 6-98 所 示 。 将 “时 间 指 示 器 ” 移 至 3 秒 的 位 置 ， 在 “合成 ”窗口 中 将 该 素材 向 左 
水 平移 的 如 图 6-99 所 示 。 


图 6-98 图 6-99 


BB》 同时 选中 该 图 层 的 4 个 关键 帧 ， 按 快捷 键 F9， 为 所 选中 的 关键 帧 应 用 “ 缓 动 ”效果 ， 如 医 
6-100 所 示 。 单 击 “时间 轴 ”面板 上 的 “图 表 编 辑 器 ”按钮 图 , 进入 图 表 编 辑 器 状态 , 如 图 6-101 所 示 。 


图 6-101 
了 0) 分 别 对 两 条 运动 曲线 左 侧 的 锚 点 进行 调整 , 拖 动 方向 线 调整 运动 速度 曲线 , 如 图 6-102 所 示 。 
次 单 击 “图表 编辑 器 ”按钮 图 ， 返 回 到 默认 状态 。 将 “时 间 指 示 器 ” 移 至 2 秒 的 位 置 ， 选 择 并 显示 
“引导 页 3” 图 层 ， 在 “合成 ”窗口 中 将 该 图 层 中 的 素材 调整 到 合适 的 位 置 ， 如 图 6-103 所 示 。 


dd os Unmet 


种 按 快 捷 键 P， 显 示 该 图 层 的 “位 置 ” 属 性 ， 插 入 该 属性 关键 帧 ， 如 图 6-104 所 示 。 将 “时 
间 指 示 器 ” 移 至 3 秒 的 位 置 , 在 “合成 ”窗口 中 将 该 素材 向 左 水 平移 至 合适 的 位 置 , 如 图 6-105 所 示 。 


图 6-104 图 6-105 

了 了 BD 将“ 时间 指示 器 ” 移 至 4 秒 的 位 置 ， 单 击 “ 位 置 ”属性 左 侧 的 “添加 或 移 除 关键 帧 ”按钮 ， 

添加 关键 帧 ， 如 图 6-106 所 示 。 选 择 2 秒 位 置 的 “位 置 ”属性 关键 帧 ， 按 快捷 键 Ctri+C 进行 复制 ， 
将 “时 间 指 示 器 ” 移 至 5 秒 的 位 置 ， 按 快捷 键 Ctrl+V 进行 粘贴 ， 如 图 6-107 所 示 。 


图 6-106 图 6-107 


了 同时 选中 该 图 层 的 4 个 关键 帧 ， 按 快捷 键 BE， 为 所 选中 的 关键 帧 应 用 “ 缓 动 ”效果 ， 如 医 
6-108 所 示 。 单 击 “ 时 间 轴 ”面板 上 的 “图 表 编辑 器 ”按钮 图 , 进入 图 表 编辑 器 状态 , 如 图 6-109 所 示 。 


加 6108 4 6-109 

下》 分 别 对 两 条 运动 曲线 左 侧 错 点 进行 调整 ， 拖 动 方向 线 调整 运动 速度 曲线 ， 如 图 6-110 所 示 。 
次 单 击 “ 图 表 编辑 器 ”按钮 图 ， 返 回 到 默认 状态 。 选 择 “ 引 导 页 2”， 同 时 选择 该 图 层 中 的 4 个 关 
键 帧 ， 按 快捷 键 Ctt+C， 复 制 选 中 的 多 个 关键 帧 ， 如 图 6-111 所 示 。 


图 6-110 图 6-111 
下 将“ 时间 指 示 器 ” 移 至 4 秒 的 位 置 ， 按 快捷 键 Ctrl+V， 粘 贴 所 复制 的 多 个 关键 帧 ， 如 
到 6-112 所 示 。 在 复制 得 到 的 关键 帧 上 右 击 , 在 弹出 的 菜单 中 执行 “关键 帧 辅助 ">" 时 间 反 向 关键 帧 ” 


国 | 


A FE 


命令 ,将 复制 得 到 的 4 个 关键 帧 进行 时 间 反 向 。 


图 6-112 


在 该 动画 中 ， 首 先 制作 的 是 3 张 引 导 页 从 右 至 左 进行 位 置 移动 切换 的 动画 效果 ， 当 第 3 张 引 导 页 切换 完成 后 ， 
再 从 左 至 右 进行 位 置 移动 切换 ， 所 以 此 处 只 需要 复制 该 E j 面 所 制作 的 位 置 移 动 动画 关键 帧 ， 然 后 再 将 这 4 个 关 
键 帧 的 时 间 反 向 ， 就 能 够 快速 制作 出 向 另外 一 个 方向 移动 画 的 动画 效果 


有 单 击 “ 时 间 轴 ”面板 上 的 “图 表 编辑 器 ”按钮 图 ， 进 入 图 表 编 辑 器 状态 ， 如 图 6-113 所 示 。 
对 右 侧 的 两 条 运动 曲线 分 别 进行 调整 ， 从 而 使 右 侧 的 两 条 运动 曲线 与 左 侧 两 条 运动 曲线 相同 ， 如 图 
6-114 所 示 。 


图 6-113 图 6-114 

对 返回 到 默认 的 时 间 轴 状态 。 选 择 “ 引 导 页 1” 图 层 ， 同 时 选择 该 图 层 中 的 2 个 关键 帧 ， 
按 快捷 键 Ctt+C， 复 制 关 键 帧 ， 如 图 6-115 所 示 。 将 “时 间 指 示 器 ” 移 至 6 秒 的 位 置 ， 按 快捷 键 
Ctrl+V, 粘贴 所 复制 的 关键 帧 , 如 图 6-116 所 示 。 在 复制 得 到 的 关键 帧 上 右 击 , 在 弹出 的 菜单 中 执行 " 关 
键 帧 辅助 ”> “时 间 反 向 关键 帧 ”命令 ， 将 复制 得 到 的 2 个 关键 帧 进行 时 间 反 向 。 


0;00:04100 
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图 6-115 图 6-116 
Eg 击 “ 时 间 轴 ”面板 上 的 “图 表 编辑 器 ” 按 馈 国 ， 进 入 图 表 编 辑 器 状态 ， 如 图 6-117 所 示 。 
对 右 侧 的 运动 曲线 进行 调整 ， 从 而 使 右 侧 的 运动 曲线 与 左 侧 运 动 曲线 相同 ， 如 图 6-118 所 示 。 
有 返回 到 默认 的 时 间 轴 状态 , 至 此 已 经 完成 3 张 引导 页 图 片 移动 切换 的 动画 制作 。 选择 “ 圆 点 ” 
和 层 ， 可 以 根据 前 面 的 制作 方法 ， 完 成 该 图 层 中 白色 小 圆 点 左右 移动 动画 的 制作 ，“ 时 间 轴 ”面板 
如 图 6-119 所 示 。 


所 


CZs 


> 


观 完成 该 引导 界面 切换 动 效 的 制作 ， 单 击 “ 预 览 ” 面 板 上 的 


"播放 /停止 ”按钮 国 ， 可 以 在 


“合成 ”窗口 中 预览 动画 效果 。 也 可 以 根据 前 面 介绍 的 泻 染 输出 方法 ， 将 该 动画 泻 染 输出 为 视频 文件 ， 


图 6-120 


6.4 国 导航 菜单 动 效 设计 


使 用 Photoshop 将 其 输出 为 GIF 格式 的 动画 ， 动 画 效果 如 图 6-120 所 示 。 


Ee 


移动 端 导航 菜单 的 表现 形式 多 种 多 样 ， 除 了 目前 广泛 使 用 的 交互 式 侧 边 导 航 菜单 外 ， 还 有 其 他 


的 一 些 表现 形式 ， 合 理 的 移动 端 导 航 菜单 动画 设计 ， 不 仅 可 以 提升 
的 设计 感 。 


交互 式 动态 导航 菜单 的 优势 一 全 


酒 


参 着 移动 互联 网 的 发 展 和 普及 ， 移 动 端 的 导航 菜单 与 传统 PC 端 


户 体验 ， 还 可 以 增强 移动 端 应 


的 导航 形式 有 着 一 定 的 区 别 ， 


主要 表现 为 移动 端 为 了 节省 屏幕 的 显示 空间 ， 通 常 采用 交互 式 动态 导航 菜单 。 默 认 情况 下 ， 在 移动 


所 示 。 


端 界面 中 隐藏 导航 菜单 ， 在 有 限 的 屏幕 空间 中 充分 展示 界面 内 容 ， 在 需要 使 用 导航 菜单 时 ， 再 通过 
单 击 相应 的 图 标 来 动态 滑 出 导航 菜单 ， 常 见 的 有 侧 边 滑 出 菜单 、 项 部 滑 出 菜单 等 形式 ， 如 图 6-121 


After Effects CC 移动 网 站 UI 交互 动 效 设计 全 程 揭 秘 
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和 全 直入 信 全 切合 全 全 全 全 全 全 全 全 全 生起 全 汪 全 二 全 二 全 二 全 出 作 二 合击 全 全 人 当 由 全 二 全 同人 二 起 二 当 贞 二 二 二 二 认 直 业 二 二 二 册 喇 作 贞 全 全 二 全 灿 全 者 作品 估 二 全 呈 全 生息 二 后 后 全 此 全 贞 站 晤 全 此 找 生 相 全 信者 雹 代 起 寺 扣 作 总 


| 作 时 ， 可 以 单 击 相应 的 按钮 ， 
| 以 将 其 隐藏 ， 节 省 界面 空间 。 


侧 边 式 导 航 又 称 为 抽 慑 式 导航 ， 在 移动 端 界面 中 常常 与 顶部 或 底部 标签 导航 结合 使 用 。 侧 边 式 导航 将 部 分 信息 
内 容 进行 隐藏 ， 突 出 了 界面 中 的 核心 内 容 


交互 式 动态 导航 菜单 能 够 给 用 户 带 来 新 鲜 感 和 愉悦 感 ， 并 且 能 够 有 效 地 增强 用 户 的 交互 体验 ， 但 
是 交互 式 动态 导航 菜单 不 能 忽略 其 本 身 最 主要 的 性 质 即 使 用 性 。 在 设计 交互 式 导航 菜单 时 ， 需 要 尽 可 
能 使 用 用 户 熟 悉 和 了 解 的 操作 方法 来 表现 导航 菜单 动画 ， 从 而 使 用 户 能 够 快速 适应 界面 的 操作 。 


导航 菜单 的 设计 要 点 


在 设计 移动 端 界面 导航 菜单 时 ， 最 好 能 够 按照 移动 操作 系统 所 设 定 的 规范 进行 ， 不 仅 能 使 所 设 
计 出 的 导航 菜单 界面 更 美观 、 丰 富 ， 而 且 能 与 操作 系统 协调 一 致 ， 使 用 户 能 够 根据 平时 对 系统 的 操 
作 经 验 ， 触 类 旁 通 地 知晓 该 移动 端 应 用 的 各 功能 和 简捷 的 操作 方法 ， 增 强 移动 端 应 用 的 灵活 性 和 可 
操作 性 。 如 图 6-122 所 示 为 常见 的 移动 端 导 航 菜单 设计 。 


图 6-122 


日 不 可 操作 的 菜单 项 一 般 需 要 屏蔽 变 灰 。 导 航 菜单 中 有 一 些 菜单 项 是 以 变 灰 的 形式 出 现 的 ， 并 使 

用 虚线 字符 来 显示 , 这 一 类 的 命令 表示 当前 不 可 用 , 也 就 是 说 , 执行 此 命令 的 条 件 当前 还 不 具备 。 

加 ”当前 使 用 的 菜单 命令 进行 标记 。 对 于 当前 正在 使 用 的 菜单 命令 ， 可 以 使 用 改变 背景 色 或 在 菜单 
命令 旁边 添加 勾 号 (MV ) ， 区 别 显示 当前 选择 和 使 用 的 命令 ， 使 菜单 的 应 用 更 具有 识别 性 。 


~ 一 -一 Ys it 
@@、 对 相关 的 命令 使 用 分 隔 条 进行 分 组 。 为 了 使 用 户 迅速 地 在 菜单 中 找到 需要 执行 的 命令 项 ， 非 常 

有 必要 对 菜单 中 相关 的 一 组 命令 用 分 陋 条 进行 分 组 ， 这 样 可 以 使 菜单 界面 更 清晰 、 易 于 操作 。 
@@。 应 用 动态 和 弹出 式 菜单 。 动 态 菜 单 妈 在 移动 端 应 用 运行 过 程 中 会 伸缩 的 菜单 ， 弹 出 式 菜单 的 设 


计 则 可 以 有 效 地 节约 界面 空间 ， 通 过 动态 菜单 和 弹出 式 菜单 的 设计 和 应 用 ， 可 以 更 好 地 提高 应 
界面 的 灵活 性 和 可 操作 性 ， 如 图 6-123 所 示 。 


| 这 是 一 个 移动 端 应 用 的 便 边 导航 菜单 动画 效果 ， 当 用 户 单 击 界面 左上 角 的 导航 菜单 ! 
1 动画 的 形式 从 左 侧 滑 入 界面 中 ， 并 且 该 界面 中 的 侧 边 导 航 菜单 还 采用 了 非常 规 的 圆 弧 状 设计 ， 给 人 留 下 深刻 的 印象 。} 
1 动态 的 表现 方式 使 UI 界面 的 交互 性 更 加 突出 ， 并 增强 了 用 户 的 交互 体验 。 ! 


图 6-123 


制作 侧 边 滑 入 导航 菜单 动 效 
侧 滑 导航 菜单 是 移动 端 App 应 用 最 常见 的 导航 菜单 表现 方式 ， 这 种 方式 能 够 有 效 节省 界面 的 空 


间 ， 当 需要 使 用 导航 菜单 时 ， 可 以 单 击 界面 中 的 某 个 图 标 ， 从 而 使 隐藏 的 导航 菜单 从 侧面 滑 出 ， 不 
需要 使 用 时 可 以 将 其 隐藏 ， 从 而 使 界面 具有 一 定 的 交互 动 效 。 在 本 节 中 将 带领 读者 完成 一 个 侧 边 滑 
入 导航 菜单 动 效 的 制作 ， 在 该 动 效 的 制作 过 程 中 重点 是 通过 “位 置 ”“ 缩 放 ” 和 “不 透明度 ”等 基 
础 属性 来 实现 该 动 效 的 表现 。 


实例 33 一 一 制作 侧 边 滑 入 导航 菜单 动 效 ( 和 时 
Ey i 

源 文件 ， 源 文件 \ 第 6 章 \6-4-3.aep 视频: 视频 \ 第 6 章 \6-4-3.mp4 : 
加 


加 在 After Effects 中 新 建 一 个 空白 的 项 目 , 执行 “合成 ”> “新 建 合成 " 命令 ， 
弹出 “合成 设置 ”对 话 框 ， 对 相关 选项 进行 设置 ， 如 图 6-124 所 示 。 执行 “文件 ” >“ 导入 ”> “文件” 
命令 ,导入 素材 图 像 “ 源 文件 \ 第 6 章 \ 素 材 \64301jpg 和 64302jpg”， 如 图 6-125 所 示 。 


图 6-124 图 6-125 
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只 在 "项 目 "面板 中 将 64301.jpg 素 材 拖 入 “时间 轴 " 面 板 中 , 将 该 图 层 重 命名 为 "界面 ", 在 "合成 ” 
窗口 中 可 以 看 到 该 素材 的 效果 ， 如 图 6-126 所 示 。 在“ 项目 ”面板 中 将 64302.jpg 素材 拖 入 “时 间 轴 ” 
板 中 ， 将 该 图 层 重 命名 为 “菜单 ”， 在 “合成 ”窗口 中 将 其 调整 至 合适 的 位 置 ， 如 图 6-127 所 示 。 


图 6-126 | 图 6-127 
网 不 要 选择 任何 对 象 ， 使 用 “椭圆 工具 ”， 在 工具 栏 中 设置 “填充 ”为 白色 ，“ 描 边 ”为 无 ， 
勾 选 “ 贝 塞 尔 曲 线路 径 ” 复 选 框 ， 在 “合成 ”窗口 中 合适 的 位 置 绘 制 正 圆 形 ， 效 果 如 图 6-128 所 示 。 
将 该 图 层 重 命名 为 “光标 ”， 如 图 6-129 所 示 。 


0:00:00:00 


He 时 


4] 6-128 图 6-129 


选择 “光标 ”图 层 ， 使 用 “向 后 平移 ( 锚 点 ) 工具 ”， 将 锚 点 调整 至 该 正 圆 形 的 中 心 位 置 ， 


0 图 6-130 所 示 。 将 “时 间 指 示 器 ” 移 至 0 秒 的 位 置 ， 为 “缩放 ”和 “不 透明 度 " 属性 插入 关键 帧 ， 
设置 “缩放 ”和 “不 透明 度 ” 属 性 值 均 为 0% ， 效 果 如 图 6-131 所 示 。 


六 党 


0:00:00:00 已 
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图 6-130 站 图 6-131 
有 RB 将 “时 间 指 示 器 ” 移 至 0 秒 07 帧 的 位 置 ， 设 置 该 图 形 的 “缩放 ”和 “不 透明 度 ” 属 性 均 为 
100%， 效 果 如 图 6-132 所 示 。 选 择 “ 菜 单 ” 图 层 ， 按 快捷 键 P， 显 示 出 该 图 层 的 “位 置 ”属性 ， 为 
该 属性 插入 关键 帧 ， 如 图 6-133 所 示 。 


图 6-132 图 6-133 
JB 将 “时 间 指示 器 ” 移 至 0 秒 17 帧 的 位 置 ， 在 “合成 ”窗口 中 将 菜单 水 平 向 右 移 至 合适 的 位 
置 ， 如 图 6-134 所 示 。 将 “时 间 指 示 器 ” 移 至 0 秒 21 帧 的 位 置 ， 单 击 “ 位 置 ”属性 左 侧 的 “添加 
或 移 除 关键 帧 ”图 标 ， 添 加 “位 置 ” 属 性 关键 帧 ， 如 图 6-135 所 示 。 


0:00:00:21 


图 6-134 图 6-135 
芭 将 “时 间 指 示 器 ” 移 至 1 秒 04 帧 的 位 置 ， 在 “合成 ”窗口 中 将 菜单 水 平 向 左 移 至 合适 的 位 
置 ， 如 图 6-136 所 示 。 将 “时 间 指 示 器 ” 移 至 1 秒 13 帧 的 位 置 ， 在 “合成 ”窗口 中 将 菜单 水 平 向 
右 移 至 合适 的 位 置 ， 如 图 6-137 所 示 。 


RB 将 “时 间 指 示 器 ” 移 至 1 秒 23 帧 的 位 置 ， 在 “合成 ”窗口 中 将 菜单 水 平 向 左 移 至 合适 的 位 
置 ， 如 图 6-138 所 示 。 拖 动 鼠 标 同时 选中 该 图 层 中 的 所 有 属性 关键 帧 ， 按 快捷 键 PE， 应 用 “组 动 ” 
效果 ， 如 图 6-139 所 示 。 

有 单 击 “ 时 间 轴 ”面板 上 的 “图 表 编辑 器 ” 按 馈 回 ， 进 入 图 表 编辑 器 状态 ， 如 图 6-140 所 示 。 
线 进行 调整 ， 如 图 6-141 所 示 。 


对 该 元 素 的 


Ae FE 


图 6-140 图 6-141 
0) 返回 时 间 轴 的 默认 编辑 状态 ， 将 “时 间 指 示 器 ” 移 至 0 秒 07 帧 的 位 置 ， 选 择 “ 光 标 ”图 层 ， 
为 该 图 层 的 “位 置 ”属性 插入 关键 帧 ， 如 图 6-142 所 示 。 将 “时 间 指 示 器 ” 移 至 0 秒 17 帧 的 位 置 ， 
在 “合成 ”窗口 中 将 光标 图 形 移 至 合适 的 位 置 ， 如 图 6-143 所 示 。 


0:00:00:07 


图 6-142 图 6-143 

了 于 根据 “菜单 ”图 层 相同 的 制作 方法 ， 可 以 完成 该 图 层 中 动画 效果 的 制作 ，“ 时 间 轴 ”面板 
如 图 6-144 所 示 。 选 择 该 图 层 中 所 有 “位 置 ”属性 关键 帧 ， 按 快捷 键 F9， 应 用 “ 缓 动 ”效果 ， 如 
6-145 所 示 。 


图 6-144 图 6-145 

“时 间 轴 ”面板 上 的 “图 表 编 辑 器 ”按钮 图 ， 进 入 图 表 编 辑 器 状态 ， 对 该 元 素 的 运动 
线 进行 调整 ， 如 图 6-146 所 示 。 返 回 时 间 轴 的 默认 编辑 状态 ， 将 “时 间 指示 器 ” 移 至 1 秒 23 帧 
的 位 置 ， 分 别 为 “光标 ”图 层 的 “缩放 ”和 “不 透明 度 ” 属 性 添加 关键 帧 ， 如 图 6-147 所 示 。 


:12 于 


FF 


[em 


图 6-146 图 6-147 


了 有 B 将 “时 间 指 示 器 ” 移 至 2 秒 06 帧 的 位 置 ， 设 置 “缩放 ”和 “不 透明 度 ” 属 性 均 为 0%， 效 


果 如 图 6- 148 所 示 。 将 “时 间 指 示 器 ” 移 至 0 秒 07 帧 的 位 置 ， 展 开 “ 光 标 ” 


图 层 下 方 “ 内 容 ” 先 


页 中 的 “椭圆 1” 选 项 中 的 “路 径 1” 选 项 ， 为 “路 径 ”属性 插入 关键 帧 ， 如 图 


6-149 所 示 。 


图 6-148 图 6-149 
了 将 “时 间 指 示 器 ” 移 至 0 秒 09 帧 的 位 置 ， 使 用 “选取 工具 ”， 修 改 


辐 形 的 路 径 效果 ， 如 


妈 6-150 所 示 。 将 “时 间 指 示 器 " 移 至 0 秒 15 帧 的 位 置 , 单 击 "路径 ” 属 性 前 的 “ 
盆 钮 ， 在 当前 位 置 添加 “路 径 ”属性 关键 帧 ， 如 图 6-151 所 示 。 


女士 衬衫 
牛仔 裤 ¥ 199 


图 6-150 图 6-151 


2 了 B 选 择 0 秒 07 帧 位 置 的 “路 径 ” 属 性 关键 帧 ， 按 快捷 键 Ctri+C 进行 复制 


移 至 0 秒 17 帧 的 位 置 ， _ 按 快捷 刍 Ctrl+V， 粘 贴 关键 帧 ， 如 图 6-152 所 示 。 将 


添加 或 移 除 关键 帧 ” 


， 将 “时 间 指示 器 ” 


“时 间 指 示 器 ” 移 至 0 


秒 21 帧 的 位 置 ， 单 击 “ 路 径 ”属性 前 的 “添加 或 移 除 关键 帧 ”按钮 ， 在 当前 位 置 添 加 “路 径 ” 属 性 


关键 帧 ， 如 图 6-153 所 示 。 


2B 将“ 时间 指 示 器 ” 移 至 0 秒 23 帧 的 位 置 ， 使 用 “选取 工具 ”， 修 改 医 


形 的 路 径 效 果 ， 如 


到 6-154 所 示 。 选 择 0 秒 07 帧 位 置 的 “路 径 ” 属 性 关键 帧 ， 按 快捷 键 Ctl+C 进行 复制 ， 将 “时 间 


站 示 器 ” 移 至 1 秒 04 帧 的 位 置 ， 按 快捷 键 Ctt+V， 粘 贴 关键 帧 ， 如 图 6-155 所 示 。 
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图 6-153 


今日 团购 


我 的 订单 


图 6-154 图 6-155 
六 使 用 相同 的 制作 方法 ， 可 以 完成 该 图 层 中 “路 径 ” 属性 动画 的 制作 ，“ 时 间 轴 ”面板 如 
图 6-156 所 示 。 


0:00:01:23 


图 6-156 

了 将 “时 间 指示 器 ” 移 至 0 秒 07 帧 的 位 置 ， 选 择 “ 界 面 ”图 层 ， 为 “缩放 ”和 “不 透明 度 " 
属性 插入 关键 帧 ， 如 图 6-157 所 示 。 将 “时 间 指 示 器 " 移 至 0 秒 17 帧 的 位 置 ， 设 置 该 图 层 的 “缩放 ” 
属性 值 为 85% ，“ 不 透明 度 ” 属 性 值 为 80% ， 效 果 如 图 6-158 所 示 。 


0:00:00:07 


obea ® 


图 6-157 图 6-158 


sd os urn 
8 将 “时 间 指示 器 ” 移 至 0 秒 21 帧 的 位 置 ， 在 当前 位 置 分 别 为 “缩放 ”和 “不 透明 度 ”属性 


添加 关键 帧 ， 如 图 6-159 所 示 。 将 “时 间 指示 器 ” 移 至 1 秒 04 帧 的 位 置 ， 设 置 该 区 
属性 值 为 919% ，“ 不 透明 度 ”属性 值 为 88%， 效 果 如 图 6-160 所 示 。 


图 6-159 


图 6-160 


层 的 “缩放 ” 


有 将 “时 间 指示 器 " 移 至 1 秒 13 帧 的 位 置 , 设置 该 图 层 的 “缩放 ”属性 值 为 87% ,，“ 不 透明 度 ” 
属性 值 为 81% ， 效 果 如 图 6-161 所 示 。 将 “时 间 指 示 器 ” 移 至 1 秒 23 帧 的 位 置 ， 设 置 该 图 层 的 “ 缩 


放 ” 和 “不 透明 度 ” 属 性 值 均 为 100% ， 效 果 如 图 6-162 所 示 。 


图 6-161 


图 6-162 


面板 


三 完成 该 侧 边 滑 入 导航 菜单 动 效 的 制作 ， 在 “时 间 轴 " 


如 图 6-163 所 示 。 


0:00:00:00 


ohea 申 


图 6-163 


可 以 看 到 所 有 


到 层 的 关键 帧 ， 


珊 单 击 “预览 ”面板 上 的 “播放 /停止 ”按钮 国 ， 可 以 在 “合成 ”窗口 


可 以 根据 前 面 介绍 的 演 染 输出 方法 ， 将 该 动画 泻 染 输 出 为 视频 文件 ， 
GIF 格式 的 动画 ， 动 画 效果 如 图 6-164 所 示 。 


预览 动画 效果 。 也 


使 用 Photoshop 将 其 输出 为 


辐 | 
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坊村 = 一 , 一 


界面 切换 动 效 是 移动 端 应 用 最 多 的 动态 效果 ， 连 接 两 个 界面 ， 虽 然 界面 切换 动 效 通常 只 有 极 短 
的 时 间 ， 但 能 够 在 一 定 程度 上 影响 用 户 对 界面 间 逻 辑 的 认 知 。 通 过 合理 的 动画 效果 让 用 户 能 更 清楚 


我 从 哪里 来 、 现 在 在 哪 、 怎 么 回去 等 一 系列 问题 。 


党 4 种 常见 的 界面 切换 转 场 动 效 @ 


用 户 初次 接触 产品 ， 恰 当 的 动画 效果 使 产品 界面 间 的 逻辑 关系 与 用 户 自 身 建立 起 来 的 认 知 模型 
相 吻 合 ， 操 作 后 的 反馈 符合 用 户 的 心理 预期 。 在 移动 端 应 用 中 常见 的 界面 切换 动 效 主要 可 以 分 为 以 
下 4 种 类 型 。 


弹出 形式 的 动 效 多 应 用 于 移动 端的 信息 内 容 界 面 ， 用 户 将 绝 大 部 分 注意 力 集中 在 内 容 信息 本 身 
上 。 当 信息 不 足 或 者 展现 形式 上 不 符合 自身 要 求 时 ， 临 时 调用 工具 对 该 界面 内 容 进行 添加 、 编 辑 等 
操作 。 在 临时 界面 停留 时 间 短 暂 ， 只 想 快速 操作 后 重新 回 到 信息 内 容 本 身上 面 。 弹 出 形式 的 动 效 演 
示 如 图 6-165 所 示 。 

还 有 一 种 情况 类 似 于 侧 边 导航 菜单 ， 这 种 动画 效果 并 不 完全 属于 页 面 间 的 转 场 切换 ， 但 是 其 使 
用 场景 很 相似 。 

当 界面 中 的 功能 比较 多 的 时 候 ， 就 需要 在 界面 中 设计 多 个 功能 操作 选项 或 按钮 ， 但 是 界面 空间 
有 限 ， 不 可 能 将 这 些 选 项 和 按钮 全 部 显示 在 界面 中 ， 这 时 通常 的 做 法 就 是 通过 界面 中 的 某 个 按钮 来 
触发 一 系列 的 功能 或 者 一 系列 的 次 要 内 容 导 航 ， 同 时 主要 的 信息 内 容 页 面 并 不 离开 用 户 视线 ， 始 终 
提醒 用 户 来 到 该 界面 的 初衷 。 侧 边 弹出 形式 的 动 效 演示 如 图 6-166 所 示 。 


Ei 
二 用 户 在 该 信息 内 容 界面 中 


进行 操作 时 ， 需 要 临时 调 
用 相应 的 工具 或 内 容 ， 则 


单 击 该 界面 右上 角 的 加 号 
按钮 ， 相 应 的 界面 会 以 从 
底部 弹出 的 形式 出 现 

图 6-165 


第 6 章 UI 界面 动 效 设计 


: 到 当 5 会 变形 为 矩形 
| 部 分 显示 该 电影 的 相关 场次 信息 ， 用 户 可 以 单 击 选择 相应 的 场次 ， 同 样 应 用 界面 会 
;选择 座位 的 界面 中 ， 整 个 界面 的 切换 过 渡 流 畅 而 自然 
图 6-165( 续 ) 


[= = 二 
| 


在 一 个 页 面 上 ， 侧 边 弹出 
其 他 页 面 的 导航 入 口 ， 但 
这 些 次 要 页 面 也 都 属于 临 


| 
二 App 主要 功能 还 是 都 集中 
时 调 出 


在 电影 类 应 用 App 界面 设计 中 ， 常 常 通 过 9 电影 海报 和 少量 的 文字 来 突出 其 视觉 表现 效果 ， 通 常会 将 相应 的 功能 } 
在 需要 使 用 的 时 候 , 才 通过 单 击 界面 中 相应 的 按钮 , 从 侧 边 弹出 导航 菜单 选项 。; 


图 6-166 


当 界 面 之 间 存 在 父子 关系 或 从 属 关系 时 ， 通 常会 在 这 两 个 界面 之 问 使 用 侧 滑 转 场 动画 效果 。 通 
常 看 到 侧 滑 的 界面 切换 效果 ， 用 户 就 会 在 头脑 中 形成 不 同 层级 间 的 关系 。 侧 滑 形 式 的 界面 切换 动 效 
演示 如 图 6-167 所 示 。 
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十 每 条 信息 的 详情 界 
面 都 属于 信息 列表 
界面 的 子 页 面 ， 所 以 
它们 之 间 的 转 场 切 
换 通常 都 会 采用 侧 
滑 的 转 场 动 画 方式 


| 这 是 一 个 社交 类 应 用 App 界面 ， 在 好 友 列 表 界面 9 
面 会 运用 向 左 侧 滑 的 转 场 方式 切换 到 该 好 友 的 日志 信息 界面 中 ， 在 该 界面 中 单 击 左上 角 的 返回 图 标 时 ， 同 样 会 以 界面 ; 


| 向 右 侧 滑 的 转 场 方式 返回 到 好 友 列表 界面 中 ， 使 转 场 的 动 效 表现 更 加 真实 。 | 


图 6-167 
ETD 


在 界面 中 排列 了 很 多 同等 级 信息 ， 就 如 同 贴 满 了 信息 、 照 片 的 墙 面 ， 用 户 有 时 需要 近 距 离 看 看 
上 面 都 是 什么 内 容 ， 在 快速 浏览 和 具体 查看 之 间 轻 松 切 换 。 渐 变 放 大 的 界面 切换 动 效 与 左右 滑动 切 
换 的 动 效 最 大 的 区 别 是 , 前 者 大 多 用 在 张贴 显示 信息 的 界面 中 , 后 者 主要 用 于 罗列 信息 的 列表 界面 中 。 
在 张贴 信息 的 界面 中 左右 切换 进入 详情 ， 总 会 给 人 一 种 不 符合 心理 预期 的 感觉 ， 违 背 了 人 们 在 物理 
世界 中 形成 的 习惯 认 知 。 渐 变 放大 的 界面 切换 动 效 演示 如 图 6-168 所 示 。 


图 6-168 


人 第 6 章 UI 办 本 动 六 没 计 


该 移动 端的 电影 列表 界 ; 
; 面 中 ， 当 用 户 单 击 某 个 电 
; 影 图 片 后 ， 将 通过 渐变 放 ; 
; 大 的 转 场 动画 切换 到 该 

| 息 的 详情 界面 中 。 在 详情 | 
;界面 中 单 击 左上 角 的 返回 | 
;按钮 ， 同 样 会 以 渐变 放大 
;的 转 场 动画 切换 到 电影 列 
; 表 界面 。 ] 


除了 以 上 介绍 的 几 种 常见 的 界面 切换 动 效 之 外 ， 还 有 许多 其 他 形式 的 界面 切换 动画 效果 ， 它 们 
大 多 数 都 是 高 度 模仿 现实 世界 的 样式 ， 例 如 常见 的 电子 书 翻 页 动画 效果 就 是 模仿 现实 世界 中 的 翻 书 


Ss 如 图 6-169 所 示 为 一 种 模拟 图 片 卡 切换 的 效果 。 


图 6-169 


界面 切换 动 效 的 设计 规则 
界面 切换 动 效 在 UI 界面 中 所 起 到 的 作用 无 疑 是 显著 的 。 相 比 于 静态 的 界面 ， 动 态 的 界面 切换 更 


符合 人 们 的 自然 认 知 体系 ， 有 效 地 降低 了 用 户 的 认 知 负载 ， 屏 幕 上 元 素 的 变化 过 程 ， 前 后 界面 的 变 
化 逻辑 ， 以 及 层次 结构 之 间 的 变化 关系 ， 都 在 动画 效果 的 表现 下 ， 变 得 更 加 清晰 自然 。 从 这 个 角度 
上 来 说 ， 交 互动 效 不 仅 是 界面 的 重要 支持 元 素 ， 也 是 用 户 交互 的 基础 。 


1. 界面 切换 要 自然 


在 现实 生活 中 ， 事 物 不 会 突然 出 现 或 者 突然 消失 ， 通 常 它 们 都 会 有 一 个 转变 的 过 程 。 而 在 UI 界 
与 


面 中 ， 默 认 情 况 下 ， 界 面 状态 的 改变 是 直接 而 且 生硬 的 ， 这 使 用 户 有 时 候 很 难 立 刻 理解 。 当 界面 
两 个 甚至 更 多 状态 的 时 候 ， 状 态 之 间 的 变化 使 用 过 渡 动 画 效果 来 表现 ， 让 用 户 明 白 它们 是 怎么 来 的 ， 
而 非 一 个 瞬间 的 过 程 ， 如 图 6-170 所 示 。 


该 界面 是 以 弹出 窗口 的 形式 进行 表现 的 。 用 户 还 可 以 在 该 弹出 窗口 上 单 击 并 拖 动 ， 实现 该 弹出 窗口 以 各 页 动画 的 形式 
切换 到 其 他 相应 的 内 容 。 单 击 该 弹出 窗口 顶部 的 关闭 技 钮 ， 该 弹出 窗口 以 动画 的 形式 向 下 过 渡 隐 藏 ， 返 回 到 信息 列表 ; 
动画 效果 都 是 来 源 于 真实 的 世界 ， 所 以 用 户 在 使 用 过 程 中 能 够 很 容易 理解 。 | 


图 6-170 


一 个 层次 分 明 的 界面 切换 动 效 通常 能 够 清晰 地 展示 界面 状态 的 变化 ， 抓 住 用 户 的 注意 力 。 这 一 
点 和 人 们 的 意识 有 关系 ， 用 户 对 焦点 的 关注 和 持续 性 都 与 此 相关 。 良 好 的 过 渡 动 画 效果 有 助 于 在 正 
确 的 时 间 点 ， 将 用 户 的 注意 力 吸引 到 关键 的 内 容 上 ， 而 这 取决 于 动画 效果 是 否 能 够 在 正确 的 时 间 强 
调 对 的 内 容 ， 如 图 6-171 所 示 。 


在 该 App 应 用 界面 中 ， 通 过 单 击 界面 中 国 形 的 和 
;界面 中 。 用 户 在 动画 效果 发 生 之 前 ， 并 不 清楚 动画 效果 变化 的 结果 ， 0 
| 的 发 展 有 了 预期 ， 其 后 产生 的 结果 也 不 会 距离 预期 太 远 。 与 此 同时 ， 橙 色 的 功能 操作 按钮 在 视觉 上 也 足够 拥有 吸引 力 ， 


! 这 个 动画 效果 有 助 于 引导 用 户 进 行 下 一 步 的 交互 操作 。 


图 6-171 


ER ii 
3. 界面 切换 要 相互 关联 


个 应 用 中 不 同 功能 界面 的 切换 过 渡 ， 自 然 就 牵涉 到 变化 前 后 界面 之 间 的 关联 。 良 好 的 
切换 过 渡 动 效 连接 着 新 出 现 的 界面 元 素 和 之 前 的 交互 与 触发 元 素 ， 这 种 关联 逻辑 让 用 户 清 楚 变 化 的 
过 程 ， 以 及 界面 中 所 发 生 的 前 后 变化 ， 如 图 6-172 所 示 。 


! 这 是 一 个 移动 端 录 音 软件 界面 的 转 场 果 ， 当 用 户 单 击 录音 列表 底部 的 红色 录音 按钮 慰 的 
; 逐渐 放大 覆盖 整个 界面 ， 该 按钮 图 标 也 变 成 白色 的 暂停 按钮 ， 从 而 自然 、 流 畅 地 转 场 过 渡 到 录音 界面 中 ， 并 且 4 
! 体 现 了 界面 之 间 有 关联 性 ， 无 论 是 配色 还 是 界面 中 功能 图 标的 操作 位 置 ， 都 保持 了 一 致 性 。 


by 


在 设计 界面 切换 动 效 的 时 候 ， 时 间 和 速度 一 定 是 最 需要 设计 师 把 握 好 的 因素 。 快 速 、 准 确 ， 绝 
不 拖 查 , 这 样 的 动 效 不 会 浪费 用 户 的 时 间 , 让 人 觉得 移动 应 用 程序 产生 了 延迟 , 不 会 令 用 户 觉得 烦躁。 
当 元 素 在 不 同 状态 之 间 切 换 的 时 候 ， 运 动 过 程 在 让 人 看 得 清 、 容 易 理 解 的 情况 下 尽量 快 ， 这 样 才 
最 佳 的 状态 。 为 了 兼顾 动 效 的 效率 、 和 全 的 全 提 关 必用 人 办 动 效应 该 在 用 户 触发 之 后 的 0.1s 内 
开始 ， 在 300ms 内 户 的 时 间 , 还 好 处 如 图 为 快速 过 渡 动 效 


| 中 单 击 某 条 信息 息 图 片 ， 则 该 图 片 向 界面 上方 移动 并 放大 ， 别 面 中 其 他 信息 还 尖 有 肖 失 ， 该 医 图片 的 相关 信息 从 界面 下 方向 
! 上 入 场 , 各 界面 之 间 的 关联 性 强烈 ， 动 效 流畅 自然 。 快 速 的 动画 表现 ,可 以 使 用 户 感觉 应 用 程序 的 运行 非常 迅速 、 便捷， ; 


After Effects CC 移动 网 站 UI 交互 动 效 设计 全 程 揭 秘 
5. 清晰 的 动画 效果 。”》 


清晰 几乎 是 所 有 好 设计 的 共通 点 ， 对 于 界面 切换 动 效 来 说 也 是 如 此 。 移 动 端的 动画 效果 应 该 是 
义 功能 优先 、 视 觉 传达 为 核心 的 视觉 元 素 ， 太 过 复杂 的 动画 效果 除了 有 炫 技 之 嫌 ， 还 会 让 人 难于 理 
解 ， 甚 至 在 操作 过 程 中 失去 方向 感 ， 这 对 于 ee 个 退步 ， 而 非 优化 。 请 务必 记 住 ， 
屏幕 上 的 每 一 个 变化 都 会 让 用 户 注意 到 ， 它 们 都 会 成 为 影 户 体验 和 用 户 决策 的 因素 ， 不 必要 的 
动 效 会 让 用 户 感到 混乱 。 


动 效 应 该 避免 一 次 呈现 过 多 效果 ， 尤 其 当 动 态 效果 同时 存在 多 重 、 复 杂 的 变化 的 时 候 ， 会 自然 
地 呈现 出 混乱 的 态势 ， 少 即 是 多 的 原则 对 于 动态 效果 同样 是 适用 的 。 如 果 某 个 动 效 的 简化 能 够 让 整 
个 UI 更 加 清晰 直观 ， 那 么 这 个 修改 方案 一 定 是 个 好 主意 。 当 动 效 中 同时 包含 形状 、 大 小 和 位 移 变 化 
人 如 图 6-174 所 示 。 


的 内 容 通过 位 ; 
昌黎 动 的 动 效 在 界面 中 消失 ， a 使 动 效 看 上 去 更 有 动感 接着 另 个 界面 中 的 信息 通过 ， 
| 不 透明 度 的 显示 而 逐渐 显示 ， 同 时 显示 卡片 扫描 动 效 ， 当 卡片 扫描 成 功 后 ， 同 样 通过 不 透明 度 变化 切换 到 卡片 信息 界 ; 
; 面 ， 该 界面 中 内 容 通过 位 置 移动 进入 到 界面 中 。 整 个 转 场 动 画 的 设计 中 并 没有 使 用 过 多 复杂 的 特效 ， 只 是 使 用 了 位 置 、， 

' 不 透明 度 等 基础 属性 来 表现 动画 效果 ， 同 样 可 以 实现 简洁 、 流 畅 的 过 渡 动 画 效果 。 | 


转 场 动 效 9 


很 多 App 应 用 都 会 设置 登录 界面 ， 通 过 登录 界面 来 验证 用 户 的 身份 。 在 本 节 中 将 带领 读者 完成 
一 个 登录 转 场 动 效 ， 该 动 效 属于 演示 动 效 ， 用 于 演示 该 App 应 用 的 用 户 登录 以 及 登录 成 功 跳 转 到 主 
界面 的 整体 表现 效果 。 具 体操 作 步 骤 可 扫描 二 维 码 看 电子 书 。 


实例 34 一 “制作 登录 转 场 动 效 © 


源 文件 : 源 文件 \ 第 6 章 \6-5-3.aep 
视频 : 视频 \ 第 6 章 \6-5-3.mp4 


扫 码 看 电子 书 


>》 


制作 App 解锁 转 场 动 效 
解锁 操作 是 移动 端 App 应 用 常见 的 操作 之 一 ， 当 解锁 成 功 就 会 自动 跳 转 到 该 App 应 用 的 主 界 


中 。 在 本 节 中 将 带领 读者 完成 一 个 App 解锁 转 场 动 效 的 制作 ， 在 该 动 效 的 制作 过 程 中 ， 当 解 人 成 功 
时 ， 界 面 中 各 元 素 将 通过 “位 置 ” “缩放 ”和 “不 透明 度 ” 属 性 的 变化 在 界面 中 消失 ， 而 主 界面 中 
的 元 素 则 同样 通过 “位 置 ” “缩放 ”和 “不 透明 度 ” 属 性 的 变化 出 现在 界面 中 ， 从 而 实现 界面 的 转 场 ， 
在 制作 过 程 中 要 特别 注意 运动 规律 和 细节 的 处 理 。 


实例 35 一 制作 App 解锁 转 场 芭 效 全 


源 文 件 ， 源 文件 \ 第 6 章 \6-5-4.aep 视频 : 视频 \ 第 6 章 \6-5-4.mp4 

芭 在 Photoshop 中 打开 一 个 设计 好 的 引导 界面 PSD 文件 “ 源 文件 \ 第 6 章 \ 
素材 \65401.psd”， 可 以 看 到 相关 的 图 层 ， 如 图 6-175 所 示 。 打 开 After Effects， 
执行 “文件 ”> “导入 ”> “文件 ”命令 ， 在 弹出 的 “导入 文件 ”对 话 框 中 选择 该 PSD 素材 文件 ， 如 
图 6-176 所 示 。 


了 口 记 训 几 
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Es 


图 6-175 图 6-176 


在 PSD 素材 文件 的 图 层 中 可 以 看 到 ， 有 一 部 分 图 层 和 图 层 文件 夹 进行 了 隐藏 ， 该 部 分 为 解锁 后 需要 在 界面 中 显 
示 的 内 容 


加 单 击 “ 导 入” 按钮， 弹出 设置 对 话 框 ， 设 置 如 图 6-177 所 示 。 单 击 “ 确 定 ”按钮 ， 导 入 
PSD 素材 并 自动 生成 合成 ， 如 图 6-178 所 示 。 


图 6-177 | 图 6-178 
天 在 “项目” 面板 中 的 65401 合成 上 右 击 ， 在 弹出 的 菜单 中 选择 “合成 设置 ”命令 ， 弹 出 “ 合 
成 设置 ” 对 话 框 , 设置 “持续 时 间 ” 为 4 秒 , 如 图 6-179 所 示 。 单 击 “确定 ” 按钮， 完成 对 话 框 的 设置 ， 
双击 65401 合成 ， 在 “合成 ”窗口 中 打开 该 合成 ， 效 果 如 图 6-180 所 示 。 
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图 6-179 图 i 

况 ) 在 “时 间 轴 ”面板 中 可 以 看 到 该 合成 中 相应 的 图 层 ， 如 图 6-181 所 示 。 接 下 来 首先 制作 滑 
动 解锁 动画 。 不 要 选中 任何 对 象 ， 使 用 “椭圆 工具 ”， 在 工具 栏 中 设置 “填充 ”为 #A39EBB，“ 填 
充 不 透明 度 ” 为 20%，“ 描 边 ”为 #C2A6E5，“ 描 边 不 透明 度 ” 为 45%，“ 描 边 宽度 ”为 2 像素 ， 
在 “合成 ”窗口 中 ， 按 住 Shift 键 拖 动 鼠标 绘制 一 个 正 圆 形 ， 如 图 6-182 所 示 。 


图 6-181 图 6-182 


:文件 夹 都 会 自 | 
大 态 ] 


J 


在 “时 间 轴 ”面板 中 可 以 看 到 其 区 
动 创建 为 相应 的 合成 ，PSD 素材 中 隐藏 的 


-对 应 的 ， 并 且 PSD 素材 中 的 图 
， 导 入 After Effects 中 后 ， 同 样 保 


了 BB 将 该 图 层 重 命名 为 “光标 ”， 将 “时 间 指 示 器 ” 移 至 0 秒 04 帧 的 位 置 ， 按 快捷 键 T， 显 示 
该 医 的 ， ' 不 透明 度 ” 属 性 , 为 该 属性 插入 关键 帧 , 并 设置 其 属性 值 为 0%, 如 图 6-183 所 示 。 将 “时 
间 指 示 器 ” 移 至 0 秒 10 帧 的 位 置 ， 设 置 其 “不 透明 度 ” 为 100% ， 效 果 如 图 6-184 所 示 。 


图 6-183 


r 


用 同 使 用 "向 后 平移 ( 锚 点 ) 工 具 " ,将 该 正 圆 形 的 错 点 调整 至 正 圆 形 的 中 心 位 置 ,显示 该 图 层 的 “位 
置 ” 属 性, 为 该 属性 插入 关键 巾 ， 如 图 6-185 所 示 。 将 “时 间 指 示 器 ” 移 至 0 秒 23 帧 的 位 置 , 在 “ 合 
成 ”窗口 中 将 正 圆 形 移 至 合适 的 位 置 ， 如 图 6-186 所 示 。 


pp 
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图 6-185 

站 将 “时 间 指 示 器 ” 移 至 1 秒 18 帧 的 位 置 ， 在 “合成 ”窗口 中 将 正 圆 形 移 至 合适 的 位 置 ， 如 

图 6-187 所 示 。 将 “时 间 指 示 器 ” 移 至 0 秒 23 帧 的 位 置 ， 显 示 该 图 层 的 “缩放 ”属性 ， 为 该 属性 
插入 关键 帧 ， 如 图 6-188 所 示 。 


:00.00:23 
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图 6187 图 6-188 

有 将 “时 间 指 示 器 ” 移 至 1 秒 02 帧 的 位 置 ， 设 置 “ 缩 放 ” 属 性 值 为 80% ， 效 果 如 图 6-189 
所 示 。 将 “时 间 指 示 器 ” 移 至 1 秒 18 帧 的 位 置 ， 为 “缩放 ”属性 和 “不 透明 度 ” 属 性 添加 关键 帧 ， 
如 图 6-190 所 示 。 


司 6-189 图 6-190 
了 将 “时 间 指 示 器 ” 移 至 1 秒 21 帧 的 位 置 ， 设 置 “ 缩 放 ” 属 性 值 为 100% ，“ 不 透明 度 ” 属 
性 值 为 0% ， 效 果 如 图 6-191 所 示 。 同 时 选中 该 图 层 中 “位 置 ” 和 “缩放 ”属性 的 所 有 关键 帧 ， 按 
快捷 键 F9， 为 其 应 用 “ 缓 动 ”效果 ， 如 图 6-192 所 示 。 
型 选择 "欢迎 文字 "图 层 ,将 "时间 指示 器 " 移 至 1 秒 08 帧 的 位 置 , 分 别 为 该 图 层 的 “位置 " “缩放 "” 
和 “不 透明 度 ” 属 性 插入 关键 帧 , 如 图 6-193 所 示 。 将 “时 间 指 示 器 ” 移 至 1 秒 18 帧 的 位 置 , 设置 " 缩 
放 ” 属 性 值 为 50% ，“ 不 透明 度 ” 属 性 值 为 0% ， 将 其 向 上 移动 一 些 距离 ， 效 果 如 图 6-194 所 示 。 


图 Anc USEA 


图 6-191 图 6-192 
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图 6-193 图 6-194 
2 同时 选中 该 图 层 中 “位 置 ”和 “缩放 ”属性 的 所 有 关键 帧 ， 按 快捷 键 F9， 应 用 “ 缓 动 ”效果 ， 
如 图 6-195 所 示 。 选择 “头像 ”图 层 ,将 “时 间 指 示 器 ” 移 至 1 秒 08 帧 的 位 置 ， 分 别 为 该 图 层 的 “位 
置 ” 和 “缩放 ”属性 插入 关键 帧 ， 如 图 6-196 所 示 。 


图 6-195 | 图 6-196 
了 了 BD 将 “时 间 指示 器 ” 移 至 1 秒 23 帧 的 位 置 ， 设 置 “ 缩 放 ” 属 性 值 为 35% ， 将 其 调整 至 界面 
的 左上 角 位 置 ， 如 图 6-197 所 示 。 同 时 选中 该 图 层 中 的 所 有 关键 帧 ， 按 快捷 键 F9， 应 用 “ 缓 动 ” 效 
果 ， 如 图 6-198 所 示 。 


图 6-198 
站 选 择 “ 解 锁 图 标 ” 医 1 将 “时 间 指 示 器 ” 移 至 1 秒 11 帧 的 位 置 ， 分 别 为 该 图 层 的 “缩放 ” 
和 ,不 通明 度 ” 属性 插入 关键 帧 , 如 图 6-199 所 示 。 将 “时 间 指 示 器 " 移 至 1 秒 17 帧 的 位 置 , 设置 “ 缩 


放 ” 属 性 值 为 110%， 人 属性 值 为 0% ， 效 果 如 图 6-200 所 示 。 
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图 6-199 图 6-200 


到 


了 IB 使 用 相同 的 制作 方法 ， 可 以 分 别 制作 出 “ 


图 层 中 的 动画 ， 


点 箭头 ”和 Swipe up to unlock 


“时 间 轴 ”面板 如 图 6-201 所 示 。 


0:00:01:18 


oJel @ 图 层 才 


" 力 : 全 


图 6-201 


大 显示 并 选择 "家 里 " 图 层 , 将 “时间 指示 器 " 移 至 2 秒 05 帧 的 位 置 , 分 别 为 该 攻 


层 的 "位 置 ”“ 缩 


放 ” 和 “不 透明 度 ” 属 性 插入 关键 帧 ， 如 图 6-202 所 示 。 将 “时 间 指 示 器 ” 移 至 1 和 和 


》 17 帧 的 位 置 ， 


设置 “不 透明 度 ” 为 0%，“ 缩 放 ” 为 90%， 并 将 其 向 下 移动 位 置 ， 效 果 如 图 6-203 所 示 。 


图 6-202 图 6-203 


有 同 时 选中 该 图 层 中 “位 置 ” 和 “缩放 ”属性 的 所 有 关键 帧 ， 按 快捷 键 F9, 应 


"组 动 " 效果 ， 


辐 6-204 所 示 。 显示 并 选择 “分隔 线 " 图 层 , 将 “时间 指示 器 " 移 至 1 秒 14 帧 的 位 置 ， 
月 度 ”属性 插入 关键 帧 ， 并 设置 “不 透明 度 ” 属 性 值 为 0% ， 如 图 6-205 所 示 。 


灌 并 


为 该 图 层 的 "不 


图 6-204 图 6-205 


四 人 


一 将 “时 间 指 示 器 ” 移 至 1 秒 18 帧 的 位 置 ， 设 置 的 属性 值 为 100% ， 效 果 如 
和 6 206 所 示 。 显示 并 选择 “图 标 1” 图 层 ， 使 用 “向 后 平移 ( 锚 点 ) 工具 ”， 调 整 其 锚 点 位 于 医 
层 对 象 的 中 心 位 置 ， 如 图 6-207 所 示 。 


图 6206 国 图 6-207 

了 B 将 “时 间 指示 器 ” 移 至 2 秒 05 帧 的 位 置 ， 分 别 为 该 图 层 的 “位 置 ”“ 缩 放 ” 和 “不 透明 

度 ”属性 插入 关键 帧 ， 如 图 6-208 所 示 。 将 “时 间 指 示 器 ” 移 至 1 秒 16 帧 的 位 置 ， 设 置 “ 缩 放 " 
为 140%，“ 不 透明 度 ” 为 0%， 并 将 其 向 左上 角 位 置 移动 ， 如 图 6-209 所 示 。 


图 6-208 | 图 6-209 
王 同时 选中 该 图 层 中 “位 置 " 和 “缩放 ”属性 的 所 有 关键 帧 ， 按 快捷 键 [9， 应 用 “ 缓 动 " 效果 ， 
如 图 6-210 所 示 。 


0:00:01:16 


图 6-210 
有 使 用 相同 的 制作 方法 ， 可 以 完成 “图 标 2” 至 “图 标 6” 图 层 中 动画 效果 的 制作 ， 需 要 注意 


的 是 , 可 以 制作 每 个 图 标 从 不 同 的 方向 入 场 , 效果 如 图 6-211 所 示 , “时 间 轴 ”面板 如 图 6-212 所 示 。 
21) ae App 解锁 转 场 动 效 的 制作 ， 单 击 “ 预 览 ” 面 板 上 的 “播放 /停止 ”按钮 围 ， 可 以 在 
“合成 ”窗口 中 预览 动画 效果 。 也 可 以 根据 前 面 介绍 的 泻 染 输出 方法 ， 将 该 动画 泻 染 输出 为 视频 文件 ， 
使 用 Phol 人 将 其 输出 为 GIF 格式 的 动画 ， 动 画 效果 如 图 6-213 所 示 。 


图 6-211 图 6-212 


图 6-213 
[6.6 酉 U 界面 交互 动 效 设计 规范 2】 


随 着 大 家 对 UI 界面 交互 动 效 的 关注 ， 我 们 发 现 UI 界面 动 效 设计 与 其 他 的 UI 设计 分 支 一 样 ， 同 
样 具备 完整 性 和 明确 的 目的 性 。 伴 随 拟 物化 设计 风潮 的 告 一 段落 ，UI 设计 更 加 自由 随心 。 现 如 今 ， 
UI 交互 动 效 设 计 已 经 具备 丰富 的 特性 ， 酷 炫 灵 活 的 特效 已 经 是 UI 界面 设计 中 不 可 分 割 的 一 部 分 。 


界面 动 效 设计 要 点 -区 


面 交互 动 效 可 以 认为 是 新 兴 的 设计 领域 的 分 支 ,如 同 其 他 的 设计 一 样 , 它 也 是 有 规律 可 循 的 。 
设计 制作 各 种 交互 动 效 之 前 ， 不 妨 先 了 解 一 下 UI 界面 交互 动 效 的 设计 要 求 。 


这 是 UI 界面 动 效 设计 最 基本 的 要 求 ， 动 效 设计 就 是 要 摆脱 传统 应 用 的 静态 设 定 ， 设 计 独特 的 动 
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画 效果 ， 创 造 引人入胜 的 效果 。 

在 确保 UI 界面 风格 一 致 性 的 前 提 下 ， 表 达 出 App 的 鲜明 个 性 ， 这 就 是 UI 动 效 设计 “个 性 化 ” 
要 做 的 事情 。 同 时 ， 还 应 该 令 动画 效果 的 细节 符合 那些 约定 俗 成 的 交互 规则 ， 这 样 动 效 就 具备 了 “可 
预期 性 ”， 如 此 一 来 ，UI 动 效 设计 便 有 助 于 强化 用 户 的 交互 经 验 ， 保 持 移动 应 用 的 用 户 黏度 。 如 


图 6-214 所 示 为 个 性 的 产品 介绍 界面 。 


| 中 各 产品 信息 的 切换 则 使 用 了 位 置 和 不 透明 度 变化 的 方式 进行 呈现 ， 不 仅 可 以 单 击 产品 图 片 实现 产品 信息 的 切换 ， 还 
界面 的 表现 富有 个 性 ， 给 人 留 下 深刻 的 印象 。 


图 6-214 


2. 为 用 户 提供 操作 导向 


UI 界面 中 的 动 效应 该 令 用 户 轻松 愉悦 ， 设 计 师 需要 将 屏幕 视 作 一 个 物理 空间 ， 将 UI 元 素 看 作 
物理 实体 ， 它 们 能 在 这 个 物理 空间 中 打开 、 关 闭 ， 任 意 移动 、 完 全 展开 或 者 聚焦 为 一 点 。 动 效应 该 
随 动作 移动 而 自然 变化 ， 为 用 户 做 出 应 有 的 引导 ， 不 论 是 在 动作 发 生前 、 过 程 中 还 是 动作 完成 以 后 ， 
U1 动 效 就 应 该 如 同 导游 一 样 ， 为 用 户 指引 方向 ， 防 止 用 户 感到 无 聊 ， 减 少 额外 的 图 形 化 说 明 ， 如 
图 6-215 所 示 。 
在 该 界面 的 工具 图 标 弹 出 动画 设计 中 , 使 
| 用 了 界面 背景 变 暗 和 图 标 元 素 惯性 弹出 | 
| 相 结合 的 动画 效果 ， 从 而 有 效 地 创造 出 界 | 
; 面 的 视觉 焦点 ， 使 用 户 的 注意 力 被 吸引 到 
;弹出 的 3 个 彩色 的 功能 操作 图 标 上 ， 引 
| 导 用 户 操作 。 


该 界面 的 动画 设计 中 ， 当 用 户 在 导航 主 ; 
; 界面 中 点 击 某 个 选项 后 ， 该 选项 会 自动 展 ; 
1 开 充满 整个 界面 ， 然 后 再 通过 一 个 优雅 的 ; 
! 展 开动 画 效果 过 渡 到 相关 操作 选项 界面 , ; 
;无 论 是 色彩 还 是 界面 的 切换 顺序 都 表现 ; 
! 出 明显 的 层次 感 。 1 


tt 


动 效应 该 为 内 容 赋 予 背景 ， 通 过 背景 来 表现 内 容 的 物理 状态 和 所 处 环境 。 再 摆脱 模拟 物品 细节 和 纹 


理 的 设计 束缚 之 后 ，UI 界面 设计 甚至 可 以 自由 地 表现 与 环境 设 定 矛盾 的 动态 效果 。 为 对 象 添加 拉 伸 或 者 形 
变 的 效果 ， 或 者 为 列表 添加 俏皮 的 惯性 滚动 , 都 不 失 为 增加 UI 界面 用 户 体验 的 有 效 手段 , 如 图 6-216 所 示 。 


用 界面 设计 中 ， 使 用 
| 不同 的 背景 颜色 表现 当前 日 期 和 未 来 的 日 
期 ， 当 用 户 在 界面 中 向 下 拖 动 时 ， 以 拉 伸 ; 
表现 拖 动 效果 ， 并 且 在 界面 上 方 使 
用 不 同 的 肖 条 大 色 来 表现 以 前 的 其 信息， 
从 而 有 效 地 区 分 界面 中 不 同 的 信息 内 容 。 


;颜色 拱 配 简洁 的 图 标 表现 各 功能 导航 选项 , ; 
; 并 且 在 显示 导航 菜单 的 过 程 中 ， 各 导航 选 ; 
| 项 表现 为 晃动 的 动 效 ， 给 人 一 种 富有 趣味 
;性 的 印象 。 


图 6-216 


UI 界面 中 所 设计 的 动 效 应 该 具有 直觉 性 和 共鸣 性 。UI 动 效 的 目的 是 与 用 户 互动 ， 并 产生 共鸣 ， 
而 非 令 用 户 困 惑 甚 至 感到 意外 。UI 动 效 和 用 户 操 作 之 间 的 关系 应 该 是 互补 的 , 两 者 共同 促成 交互 完成 。 
如 图 6-217 所 示 为 一 组 UI 界面 。 
5. 提升 用 户 情感 体验 


出 色 的 UI 界面 动 效 是 et 平滑 流畅 的 滚动 能 带 来 舒适 感 ， 而 有 效 
的 动作 执行 往往 能 带 来 令 人 兴奋 的 愉悦 和 快感 ， 如 图 6-218 所 示 。 


议和 可 1 
| ;商品 图 片上 方 的 加 号 按钮 ， 这 时 该 产品 图 片 会 缩小 并 通过 位 置 的 移动 飞 入 界面 右上 角 的 购物 车 中 ， 表现 效果 非常 直观 ， | 
1 能够 有 效 提升 用 户 的 操作 体验 。 
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! 在 该 移动 App 应 用 中 根据 界面 设计 了 符合 用 ; 
A @@ ,sseterNow ; 户 直 觉 性 的 界面 切换 过 渡 动 画 效果 。 在 列表 
| 站 


1 界面 中 ,每 个 列表 项 的 右 侧 都 有 一 个 “ 右 向 "| 
; 的 箭头 图 标 ， 当 点 击 某 个 列表 项 时 ， 则 采用 ! 


:| | ;符合 用 户 预期 的 向 左 滑动 切换 到 相应 的 界面 
ee po : 中， 在 该 界面 右上 角 则 显示 了 “ 左 向 ”的 箭 ; 
| : ; 头 图 标 ， 暗 示 点 击 可 返回 上 级 界面 。 | 
1 | 篇 usveoas 1 Las Vegas 1 
! Bn San Francsco bh San Francisco : | 

她 Los Angeles Los Angeles ! 


界面 上 方 的 专辑 图 片 同样 向 上 移动 位 置 ， 显 示 出 完整 的 唱片 图 形 。 与 此 同时 ， 在 界面 中 出 现 相关 的 其 他 功能 操作 按 
和 播放 进度 条 ， 并 自动 开始 播放 音乐 ， 平 滑 的 切换 过 渡 给 用 户 带 来 流畅 感 ， 并 有 效 提升 用 户 体验 。 


钢 引 而 


通过 动 效 设计 提升 UI 界面 用 户 体验 
在 用 户 体验 中 ， 我 们 总 是 强调 “以 人 为 本 ”， 如 何 才能 做 到 “以 人 为 本 ”， 我 们 所 设计 的 应 用 


应 该 使 用 日 常用 语 , 包括 情绪 、 口 语 , 界面 应 该 成 为 用 户 的 好 朋友 , 在 UI 界面 中 加 入 恰当 的 动画 效果 ， 
表达 当前 的 操作 反馈 和 状态 ， 无 论 背 景 的 逻辑 多 么 复杂 ， 都 能 够 使 界面 更 加 亲切 。 


当 用 户 在 界面 中 进行 操作 时 ， 总 是 希望 能 够 马上 获得 回复 ， 让 用 户 知晓 当前 发 生 了 什么 。 例 如 
在 用 户 进行 操作 时 , 在 界面 中 显示 图 形 , 反映 完成 百分比 , 或 者 播放 声音 , 让 用 户 了 解 当前 发 生 的 事情 。 
这 个 原则 也 关系 到 文件 传输 ， 不 要 让 用 户 觉得 无 聊 ， 需 要 为 用 户 提供 文件 传输 的 进度 显示 ， 即 使 
是 不 太 令 人 愉快 的 通知 ， 例 如 传输 失败 ， 也 应 该 以 令 人 喜爱 的 方式 展现 。 如 图 6-219 所 示 为 动画 图 标 。 


2. 突出 显示 变化 》 
图 标 状态 的 切换 是 界面 中 常见 的 一 种 表示 状态 变化 的 方式 ， 通 过 动画 的 形式 来 表现 按钮 状态 的 
变化 ， 能 够 有 效 吸引 用 户 的 注意 ， 不 至 于 忽略 界面 中 重要 的 信息 。 例 如 最 常见 的 “播放 ”按钮 
状态 的 变化 ， 当 用 户 点 击 其 后 会 变换 为 “暂停 ”按钮 ， 通 过 动 效 的 形式 表现 更 容易 吸引 用 户 。 
如 图 6_220 所 示 为 突出 表现 信息 的 界面 。 
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Upload Complete Complete 


; 当 用 户 在 界面 中 进行 上 传 文件 操作 时 ， 上 传 图 标 会 以 动画 的 形式 转换 成 为 上 传 进度 的 效果 ， 并 动态 显示 当前 的 上 传 进 ; 
; 度 ， 当 上 传 完成 后 ， 同 样 以 动画 的 形式 将 该 上 传 图 标 转 成 上 传 完成 的 图 标 ， 并 给 出 文字 提示 ， 给 用 户 在 不 同 状态 下 的 
提醒， 非常 直观 。 | 
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me we 会 以 白色 背景 来 突出 表现 未 读 信 
ee a 当 用 户 收 到 新 的 未 读 信息 时 ， 会 以 动 ; 
站 效 的 形式 来 突出 表现 ， 很 好 地 吸引 用 户 的 ; 
意 力 。 


3. 保持 前 后 关 玫 


智能 移动 设备 的 屏幕 尺寸 有 限 ， 很 难 在 屏幕 中 同时 展现 大 量 的 信息 内 容 ， 这 时 候 就 需要 为 移动 
应 用 设计 一 种 处 理 方式 ， 能 够 在 不 同 的 界面 之 间 保 持 清晰 的 导航 ， 让 用 户 理解 该 界面 从 何 而 来 ， 与 
之 前 的 界面 有 什么 关联 ， 如 何 返 回 到 之 前 的 界面 中 ， 这 样 才能 够 使 用 户 的 操作 更 加 得 心 应 手 ， 如 
图 6-221 所 示 。 


; 当 用 户 在 界面 中 点 击 某 个 选项 后 ， 界面 中 各 选项 将 以 展开 的 形式 非常 自然 地 过 渡 到 相应 的 界面 中 ， 而 在 该 界面 中 用 户 ， 
1 又 可 以 通过 点 击 界面 右上 角 的 “关闭 ”图 标 来 返回 到 上 级 界面 ， 当 用 户 单 击 该 图 标 时 ， 界 面 采 用 了 收缩 的 形式 逐渐 过 ; 
! 渡 到 上 级 界面 ， 前 后 界面 的 过 渡 非 常 流畅 ， 并 且 具 有 很 好 的 关联 性 。 1 
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如 果 UI 界面 采用 了 非 标准 的 布局 方式 ， 那 么 就 需要 通过 在 UI 界面 中 添加 交互 动 效 的 方式 来 帮 
助 用 户 理解 如 何 操作 非 标准 的 布局 ， 去 除 户 不 惑 。 如 图 6- 222 所 示 为 卡片 切换 动 效 。 


| 在 该 界面 中 卡片 切换 的 动 效 比 罗 以 了 三 维 卡 片 的 表现 形式 ， 在 界面 中 以 纵深 方式 排列 各 卡片 ， 给 人 
的 立体 空 te 选项 ， 
RE | 


图 6-222 


UI 界面 中 的 动 效 设计 除了 能 够 帮助 用 户 有 效 地 操作 应 用 程序 外 ， 还 能 够 有 效 地 鼓励 用 户 在 界 
中 的 其 他 操作 ， 例 如 持续 浏览 、 点 赞 或 分 享 内 容 等 ， 只 有 充分 地 发 挥动 画 的 吸引 力 ， 才 能 够 更 有 效 
地 吸引 用 户 。 如 图 6-223 所 示 为 动画 界面 。 


;在 该 应 用 的 主 界面 中 单 击 时 个 功能 操作 区 
标 隐藏 ， 再 次 单 击 菜 个 功能 操作 图 标 ， 以 动画 的 方式 呈现 相应 的 界面 ,并 
这 样 一 步 一 步 地 吸引 用 户 进行 操作 。 


6. 输入 的 视觉 化 


在 所 有 应 用 中 ， 数 据 输入 都 是 最 重要 的 操作 之 一 ， 数 据 的 输入 重点 是 尽 可 能 防止 用 户 输入 错 


误 ， 而 且 可 以 在 用 户 输入 过 程 中 加 入 适当 的 交互 动 效 ， 使 数据 输入 过 程 不 是 那么 枯燥 和 无 趣 ， 如 
6-224 所 示 。 


出 


向 应 用 的 登录 界面 中 ， 当 用 户 在 表单 元 素 中 单 击 ， 即 可 在 界面 下 方 通过 动画 的 形式 显示 出 输入 法 键盘 ， 如 果 用 ; 
| 户 在 键盘 上 点 击 输入 数据 ， 每 点 击 一 个 数字 , 该 数字 区 域 就 会 以 动画 的 形式 进行 突出 表现 , 从 而 有 效 吸引 用 户 的 注意 力 , 
;使 用 户 专注 于 信息 内 容 的 输入 。 | 


UI 界面 中 的 动 效 是 用 来 保持 用 户 的 关注 点 、 引 导 用 户 操作 的 ， 不 要 为 了 动 效 而 强硬 地 在 界面 中 添加 动画 效果 。 
在 UI 界面 中 滥用 动 效 会 让 用 户 分 心 ， 过 度 表现 和 过 多 的 转 场 动 效 会 令 用 户 烦躁 ， 所 以 还 需要 把 握 好 动 效 在 UI 界面 
中 的 平衡 。 


守 汪 和 制作 天 气 界 面 动 效 


在 天 气 应 用 App 界面 中 ， 常 常会 根据 当前 的 天 气 情况 在 界面 中 加 入 该 种 天 气 的 表现 动 效 ， 从 而 
使 界面 的 信息 表现 更 加 直观 ， 也 能 够 更 直接 地 泻 染 出 当前 天 气 的 情况 ， 非 常 实用 。 在 本 节 中 将 带领 
读者 完成 一 个 下 雪 天 气 界面 动 效 的 制作 ， 在 界面 中 除了 会 制作 各 种 天 气 信息 元 素 入 场 的 动画 外 ， 还 
将 通过 CC Snowfall 效果 制作 出 下 雪 的 动 效 ， 从 而 使 整个 天 气 界面 的 动 效 表 现 更 加 真实 。 


实例 36 一 “制作 天 气 界面 动 效 © 


源 文件 : 源 文件 \ 第 6 章 \6-6-3.aep 视频 : 视频 \ 第 6 章 \6-6-3.mp4 

到 在 Photoshop 中 打开 一 个 设计 好 的 PSD 素材 文件 “ 源 文件 \ 第 6 章 \ 素 材 
\66301.psd”， 打开 “图 层 ” 面板 , 可 以 看 到 该 PSD 文件 中 的 相关 图 层 文件 夹 和 图 夺 ， es 
如 图 6-225 所 示 。 打 开 After Effects, 执行 “文件 ” >“ 导 入 ”> “文件 ”命令 ,在 弹出 的 “导入 文件 ” 
对 话 框 中 选择 该 PSD 素材 文件 ， 如 图 6-226 所 示 。 
了 单 击 “导入 ”按钮 ， 弹 出 设置 对 话 框 ， 设 置 如 图 6-227 所 示 。 单 击 “ 确 定 ” 按 钮 ， 导 入 该 
PSD 格式 素材 ， 自 动 创建 相应 的 合成 ， 如 图 6-228 所 示 。 


A FE 
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图 6-227 图 6-228 
在 自动 创建 的 合成 上 右 击 , 在 弹出 的 菜单 中 选择 “合成 设置 " 命令 , 弹出 "合成 设置 " 对话 框 ， 
设置 “持续 时 间 ” 为 10 秒 ， 如 图 6-229 所 示 。 单 击 “ 确 定 ”按钮 ， 完 成 “合成 设置 ”对 话 框 的 设置 ， 
双击 66301 合成 , 在 “合成 ”窗口 中 打开 该 合成 , 在 “时 间 轴 ”面板 中 可 以 看 到 该 合成 中 相应 的 图 层 ， 
如 图 6-230 所 示 。 
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图 6-229 图 6-230 


在 “时 间 轴 ”面板 中 可 以 发 现 ， 所 导入 的 PSD 素材 中 的 图 层 文件 夹 同样 会 自动 创建 为 相应 的 合成 ， 在 合成 中 包 
含 相应 的 图 层 这 里 不 仅 需 要 设置 66301 合成 的 时 间 ” 为 10 秒 ， 也 需要 将 “当前 天 气 ” 和 “未 来 天 气 ” 
这 两 个 合成 的 “持续 时 间 ” 设 置 为 10 秒 ， 并 且 将 所 有 图 层 的 持续 时 间 都 调整 为 10 秒 


在 “时 间 轴 ”面板 中 双击 “当前 天 气 ”合成 ， 进 入 该 合成 的 编辑 界面 中 ， 如 图 6-231 所 示 。 
选择 “天 气 图 标 ” 图 层 , 将 “时 间 指 示 器 ” 移 至 0 秒 12 帧 的 位 置 ， 按 快捷 键 P， 显 示 该 图 层 的 “位 置 ” 
属性 ， 为 该 属性 插入 关键 帧 ， 如 图 6-232 所 示 。 


[所 
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图 6-231 
RB 将 “时 间 指示 器 ” 移 至 起 始 位 置 , 在 “合成 ” 窗口 中 将 该 图 层 内 容 垂直 向 上 移 至 合适 的 位 置 ， 
到 6-233 所 示 。 在 “时 间 轴 ”面板 中 同时 选中 该 图 层 的 两 个 关键 帧 ， 按 快捷 键 F9， 为 所 选中 的 关 
页 应 用 “ 缓 动 ”效果 ， 如 图 6-234 所 示 。 
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图 6-234 


人 
提示 

此 处 制作 的 是 该 图 层 中 的 内 容 

这 是 因为 我 们 在 设计 稿 中 已 经 

内 容 向 上 移出 场景 ， 这 样 可 以 确保 


进入 场景 中 的 动画 效果 ， 为 什么 要 采用 倒 着 做 的 方法 呢 ? 
所 以 先 在 移动 结束 的 位 置 插入 关键 帧 ， 再 在 开始 的 位 置 将 
立 置 与 设计 稿 相同 


RB 选择“ 天气 信息 ”图 层 ， 按 快捷 键 S， 显 示 该 图 层 的 “缩放 ”属性 ， 将 “时 间 指 示 器 ” 移 
至 0 秒 06 帧 的 位 置 ， 为 “缩放 ”属性 插入 关键 帧 ， 并 设置 该 属性 值 为 0% ， 如 图 6-235 所 示 ，“ 合 
成 ”窗口 中 的 效果 如 图 6-236 所 示 。 
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图 6-235 图 6-236 


将 “时 间 指 示 器 ” 移 至 0 秒 20 帧 的 位 置 ， 设 置 “ 缩 放 ” 属 性 值 为 100% ， 如 图 6-237 所 示 。 
在 时 间 轴 " 面板 中 同时 选中 该 图 层 的 两 个 关键 帧 , 按 快捷 键 F9, 为 所 选中 的 关键 帧 应 用 “ 缓 动 " 效果， 
如 图 6-238 所 示 。 
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图 6-237 图 6-238 

只 完成 “当前 天 气 " 合成 中 动画 效果 的 制作 ， 返 回 到 66301 合成 中 ， 双 击 “ 未 来 天 气 ” 合 成 ， 
进入 该 合成 的 编辑 界面 中 ， 如 图 6-239 所 示 。 选择 “信息 背景 ”图 层 , 按 快捷 键 T， 显示 该 图 层 的 “不 
透明 度 ” 属 性 ， 将 “时 间 指 示 器 ” 移 至 0 秒 20 帧 的 位 置 ， 设 置 “ 不 透明 度 ” 属 性 值 为 0%， 并 插入 
该 属性 关键 帧 ， 如 图 6-240 所 示 。 
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图 6-239 图 6-240 

了 将 “时 间 指 示 器 ” 移 至 1 秒 08 帧 的 位 置 ， 设 置 该 图 层 的 “不 透明 度 ” 属 性 值 为 100%， 效 
果 如 图 6-241 所 示 。 选择 “信息 1” 图 层 , 按 快捷 键 P， 显 示 该 图 层 的 “位 置 ”属性 , 将 “时 间 指 示 器 ” 
移 至 1 秒 20 帧 的 位 置 ， 为 “位 置 ”属性 插入 关键 帧 ， 如 图 6-242 所 示 。 


司 6-241 图 6-242 

了 0 将 “时间 指 示 器 " 移 至 1 秒 08 帧 的 位 置 , 在 “合成 "窗口 中 将 该 图 层 内 容 向 下 移 至 合适 的 位 置 ， 
如 图 6-243 所 示 。 选 择 “ 信 息 2” 图 层 ， 按 快捷 键 P， 显 示 该 图 层 的 “位 置 ”属性 ， 将 “时 间 指 示 器 ” 
移 至 2 秒 03 帧 的 位 置 ， 为 “位 置 ”属性 插入 关键 帧 ， 如 图 6-244 所 示 。 
各 将 "时间 指示 器 " 移 至 1 秒 16 帧 的 位 置 , 在 “合成 "窗口 中 将 该 图 层 内 容 向 下 移 至 合适 的 位 置 ， 
如 图 6-245 所 示 。 选 择 “ 信 息 3” 图 层 ， 按 快捷 键 P， 显 示 该 图 层 的 “位 置 ”属性 ， 将 “时 间 指 示 器 ” 


移 至 2 秒 11 帧 的 位 置 ， 为 “位 置 ”属性 插入 关键 帧 ， 如 图 6-246 所 示 。 
可 8 


回 


区 将 “时 间 指 示 器 " 移 至 1 秒 23 帧 的 位 置 , 在 "合成 "窗口 中 将 该 图 层 内 容 向 下 移 至 合适 的 位 置 ， 
如 图 6-247 所 示 。 选 择 “ 信 息 4” 图 层 ， 按 快捷 键 P， 显 示 该 图 层 的 “位 置 ”属性 ， 将 “时 间 指 示 器 ” 
移 至 2 秒 19 帧 的 位 置 ， 为 “位 置 ”属性 插入 关键 帧 ， 如 图 6-248 所 示 。 
下 将 “时 间 指 示 器 ” 移 至 2 秒 07 帧 的 位 置 ， 在 “合成 ”窗口 中 将 该 图 层 内 容 向 下 移 至 合适 的 
位 置 ， 如 图 6-249 所 示 。 为 每 个 图 层 中 的 关键 帧 都 应 用 “ 缓 动 ”效果 ， 如 图 6-250 所 示 。 
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图 6-247 图 6-248 
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图 6-249 图 6-250 


5 


了 完成 “未 来 天 气 " 合成 中 动画 效果 的 制作 , 返回 到 66301 合成 中 。 执行 “图 层 ” > 新建" > 纯 
色 ” 命 令 ， 弹 出 “纯色 设置 ”对 话 框 ， 设 置 颜色 为 白色 ， 如 图 6-251 所 示 。 单 击 “ 确 定 ”按钮 ， 新 
建 纯色 图 层 ， 将 该 图 层 调 整 至 “背景 ”图 层 上 方 ， 如 图 6-252 所 示 。 
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图 6-252 
有 了 B 选择 刚 新 建 的 纯色 图 层 ， 执 行 “ 效 果 ”> “模拟 ”> CC Snowfall 命令 ， 为 该 图 层 应 用 CC 
面板 中 取消 Composite With Origina 复 选 框 的 勾 选 状 态 , 如 图 6-253 所 示 。 


Snowfal 效 果 , 在 “效果 控件 ” 
在 “合成 ”窗口 中 可 以 看 到 CC Snowfall 所 模拟 的 下 雪 效 果 ， 如 图 6-254 所 示 。 


图 6-251 


图 6-254 
CC Snowfall 效果 的 相关 属性 进行 设置 ， 从 而 调整 下 雪 的 动画 效果 ， 
中 可 以 看 到 设置 后 的 下 雪 效 果 ， 如 图 6-256 所 示 。 


图 6-253 


》 难 在 “效果 控件 ”面板 中 对 
如 图 6-255 所 示 。 在 “合成 ” 窗 


a 


图 6-256 


图 6-255 


雪花 的 尺寸 、 下 雪 的 偏 移 方向 


在 CC Snowfall 效果 的 “效果 控件 ”面板 中 ， 可 以 通过 各 属性 来 控制 雪 量 的 大 小 、 
等 多 种 效果 ， 用 户 在 设置 的 过 程 中 完全 可 以 根据 自己 的 需要 对 参数 进行 调整 。 

六 完成 该 天 气 界面 动 效 的 制作 ， 生 板 上 的 “播放 /停止 ” 按 包围 ， 可 以 在 “合成 ” 
窗口 中 预览 动画 效果 。 也 可 以 根据 前 面 介 绍 的 泻 染 输出 方法 ， 将 该 动画 泻 染 输出 为 视频 文件 ， 再 使 
Photoshop 将 其 输出 为 GIF 格式 的 动画 ， 其 动画 效果 如 图 6-257 所 示 。 
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图 6-257 
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制作 界面 列表 入 场 动 效 


为 App 应 用 界面 中 的 列表 添加 入 场 的 动 效 ， 可 以 使 界面 的 表现 效果 更 加 具有 动感 ， 为 用 户 带 来 
独特 的 视觉 效果 。 在 本 节 中 将 带领 读者 完成 一 个 界面 列表 入 场 动 效 的 制作 ， 主 要 通过 “位 置 ”属性 


来 实现 该 动画 效果 ， 并 且 开 启 图 层 的 “运动 模糊 ”功能 ， 从 而 使 元 素 位 置 移动 的 动画 效果 表现 动感 
十 足 。 具 体操 作 步 骤 可 扫描 二 维 码 看 电子 书 。 


源 文件 ， 源 文件 \ 第 6 章 \6-6-4.aep 
视频 : 视频 \ 第 6 章 \6-6-4.mp4 


ee 
扫 码 看 电子 书 


6.7 转 如 何 设 计 出 优秀 的 UI 交互 动 效 ? 


交互 设计 的 重点 体现 在 界面 中 细节 的 交互 设计 。 出 色 的 细节 设计 可 以 使 App 应 用 在 竞争 中 脱 颖 
而 出 ， 它 们 可 能 是 实用 的 、 不 起 眼 的 衬托 ， 抑 或 使 用 户 印象 深刻 ， 为 用 户 提供 帮助 ， 甚 至 吸引 人 流 


忘 返 。 


明确 系统 状态 


系统 应 该 在 合理 的 时 间 内 ， 通 过 合适 的 反馈 来 保持 告知 用 户 将 要 发 生 的 事情 ， 也 就 是 说 ，UI 界 
必须 能 够 持续 为 用 户 提供 良好 的 操作 反馈 。 移 动 应 用 不 应 该 引起 用 户 不 断 的 猜测 ， 而 是 应 该 告诉 
户 当前 发 生 的 事情 。 

通过 合理 的 交互 动 效 就 能 够 很 好 地 为 用 户 的 操作 提供 合适 的 视觉 反馈 。 对 于 移动 端 应 用 的 操作 
过 程 状态 ， 交 互动 效能 够 为 用 户 提供 实时 的 告知 ， 使 用 户 可 以 快速 地 理解 发 生 的 一 切 ， 如 图 6-258 


> 


池上 是 


! 这 是 移动 端 界面 中 一 个 文件 下 载 的 交互 动画 ， 当 用 户 单 击 下 载 图 标 后 ， 该 下 载 图 标 将 会 以 交互 动画 的 形式 呈现 整个 下 
! 载 过 程 ， 直 到 最 终 文件 下 载 完 成 后 ， 图 标 变形 成 为 一 个 完 效果 ， 整 体 给 用 户 很 好 的 指引 和 提示 。 1 


After Effects CC 移动 网 站 UI 交互 动 效 设计 全 程 揭秘 


| 这 是 移动 并 App 应 用 界面 设计 中 常见 的 下 拉 刷 新 操作 的 交互 动画 效果 ， 这 站 发 了 祖 动 设备 上 的 内 容 设 计 创新 ， 
| 充满 趣味 性 的 刷新 动画 总 是 能 够 博得 用 户 会 心 一 笑 ， 给 用 户 留 下 深刻 的 印象 


图 6-258( 续 ) 


党 和 让 按钮 和 操控 拥有 触感 @ 


UI 界面 中 的 元 素 和 操控 组 件 无 论处 于 界面 中 的 哪个 位 置 ， 它 们 的 操控 都 应 该 是 可 感触 的 。 通 过 
en there 能 够 为 用 户 带 来 很 好 的 视觉 和 动态 指引 。 简 单 来 说 ， 就 
是 可 以 对 用 户 在 界面 中 的 操作 行为 给 予 视觉 反馈 ， 从 而 提升 用 户 界面 感知 的 清晰 度 。 

合理 的 操作 视觉 反馈 ， 能 攻 效 汉中 用 户 双 祭 疏 人 息 的 欲望 而 产生 作用 ， 当 用 户 在 移动 端 界面 
用 户 时 刻 能 够 感觉 到 掌控 一 切 ， 给 用 户 带 来 很 好 的 交互 体验 ， 如 图 6-259 所 示 。 


| 在 沪 交 坪 动 曾 中 ， 为 界面 中 的 每 个 选项 都 应 用 了 相应 的 交互 反馈 动画 效果 ， 当 用 户 在 界面 中 点 击 某 个 选项 时 ， 在 所 点 ; 
| 击 的 选项 上 就 会 册 现 浅 灰 色 图 形 逐 渐 放大 并 消失 的 动画 效果 ， 为 用 户 提供 很 好 的 反馈 ， 使 用 户 明确 知道 当前 操作 的 是 


于 有 意义 的 转 场 动 效 


。 可 以 借助 交互 动 效 的 形式 让 用 户 在 导航 和 内 容 之 间 流 畅 地 切换 ， 来 理解 屏幕 中 布置 的 元 素 的 变 
化 ， 或 以 此 强化 界面 元 素 的 层级 。 界 面 中 的 转 场 动 效 设计 是 一 种 取悦 用 户 的 手段 ， 能 够 有 效 地 吸引 
用 户 的 注意 。 在 移动 设备 上 显得 尤其 出 色 , 毕竟 方 寸 之 间 容 不 下 大 量 信息 的 堆砌 ,如 图 6-260 所 示 。 


Et 


一 个 系统 垃圾 清 清理 App 应 用 的 动 浇 设计 在 进入 垃圾 清 : 对 界面 中 | 
且 在 界面 下 方 过 渡 显示 出 所 搜索 的 垃 级 分 类 ， 查 询 完成 后 ， 单 击 界面 下 方 的 接 钮 ， 开始 清 理 所 找 到 的 系统 垃圾 ， 同 ， 


显示 清理 垃圾 动画 效果 ， 界 面 的 背景 颜色 同时 变化 为 绿色 ， 并 在 界面 中 显示 相关 的 垃圾 清理 信息 ， 平滑 的 转 场 过 渡 
具 来 操作 的 流畅 


! 该 移动 端 通过 元 素 的 流动 和 颜色 的 变化 来 实现 转 场 的 动画 效果 ， 当 用 户 在 界面 中 单 击 黄色 的 功能 操作 按钮 后 ， 元 | 


;会 移动 至 界面 的 下 方 并 逐渐 放大 填充 整个 界面 的 下 半 部 分 ， 并 显示 相应 的 选项 ， 界 面 的 转 场 切 换 显 示 轻 松 流畅 ， 并 且 ; 
1 能够 很 好 地 使 两 个 界面 之 间 产 生 关联 。 


图 6-260 


囊 帮助 用 户 


合理 的 载 入 体验 与 交互 动 效 设计 ， 能 够 为 用 户 初次 接触 该 移动 应 用 时 产生 极 大 的 冲击 ， 它 们 在 
信息 载 入 过 程 中 发 挥 了 重大 作用 。 当 用 户 在 进入 该 App 应 用 时 ， 通 过 动画 的 表现 形式 能 够 突出 最 重 
要 的 特性 和 操控 ， 给 用 户 提供 及 时 的 引导 和 帮助 ， 如 图 6-261 所 示 。 


晕 引 
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[3 强调 界面 的 变化 © 


在 许多 情况 下 ， 界 面 中 的 动 效 用 于 吸引 用 户 对 界面 中 重要 细节 的 注意 和 关注 。 但 是 在 界面 中 应 
用 这 类 动 效 时 需要 注意 , 确保 该 动 效 服务 于 界面 中 非常 重要 的 功能 , 从 而 为 用 户 提 供 良好 的 视觉 指引 ， 
而 不 是 为 了 界面 更 酷 炫 而 盲目 地 添加 动画 效果 。 如 图 6-262 所 示 为 动态 通知 图 标 。 


在 界面 中 应 用 交互 动 效 时 应 该 注意 以 下 几 个 方面 的 细节 。 

加 ”交互 动 效 在 界面 中 几乎 是 不 可 见 的 ， 并 且 完 全 是 功能 性 的 。 确 保 交 互动 效 适用 于 服务 功能 目的 ， 
不 要 让 用 户 感觉 到 被 打扰 。 对 于 常用 的 以 及 次 要 的 操作 ， 建 议 采用 适度 的 响应 ， 而 对 于 低频 的 、 
主要 的 操作 ， 响 应 则 应 该 更 有 分 量 。 

加 了解 用 户 群 体 。 根据 前 期 的 用 户 调 研 和 目标 受众 群体 , 可 以 使 界面 中 所 设计 的 交互 动 效 更 加 精确 、 
有 效 。 

四 遵循 KISS 原则 。 在 界面 中 设计 过 多 的 交互 动 效 会 对 产品 造成 致命 的 问题 。 交 互动 效 不 应 该 使 屏 
幕 信息 过 载 ， 造 成 用 户 长 时 间 的 等 待 。 相 反 地 ， 它 应 该 通过 迅速 地 传达 有 价值 的 信息 来 节省 用 
户 的 时 间 。 

加 与 界面 元 素 视觉 效果 统一 。 在 界面 中 所 设计 的 交互 动 效应 该 与 App 应 用 的 整体 视觉 风格 相 协 调 ， 
营造 出 和 谐 、 统 一 的 产品 感知 。 


人 制作 App 界面 菜单 滑动 动 效 


在 一 些 特殊 的 App 界面 中 ， 当 用 户 对 App 界面 进行 滑动 操作 时 ， 为 界面 添加 一 个 交互 操作 动 效 ， 
可 以 使 App 界面 的 表现 更 加 富有 个 性 和 趣味 性 。 本 节 将 带领 读者 完成 一 个 App 界面 菜单 滑动 动 效 的 
制作 ， 当 用 户 在 界面 中 进行 向 上 或 向 下 的 滑动 操作 时 ， 界 面 中 的 菜单 选项 会 表现 出 弯曲 变形 的 效果 ， 
从 而 使 界面 的 表现 更 加 富有 趣味 性 。 


实例 38 一 一 制作 App 界面 菜单 


源 文件 ， 源 文件 \ 第 6 章 \6-7-7.aep 视频. 视频 \ 第 6 章 \6-7-7.mp4 

加 在 After Effects 中 新 建 一 个 空白 的 项 目 , 执行 “合成 ” >" 新 建 合成 ”命令 ， 辽 bE 
弹出 “合成 设置 " 对 话 框 , 对 相关 选项 进行 设置 , 如 图 6-263 所 示 。 执行 文件 " > " 导 ”国生 千克 全 
入 ”> "文件 " 命令, 在 弹出 的 “导入 文件 ”对话 框 中 同时 选中 多 个 需要 导入 的 素材 , 如 图 6-264 所 示 。 

玛 单 击 " 导 入" 按钮 , 将 选择 的 多 个 素材 同时 导入 “项 目 ” 面板 中 , 如 图 6-265 所 示 。 执行 “ 合 
成 ”>“ 新 建 合成 ”命令 ， 弹 出 “合成 设置 ”对 话 框 ， 对 相关 选项 进行 设置 ， 如 图 6-266 所 示 。 


充 " 


图 6-263 


。 四 人 


加 
下 
上 日 


加 6-265 


有 OB 单 击 "确定 "按钮 , 创建 合成 并 
为 抽 D725C，“ 描 边 ”为 无 ， 在 “合成 ”窗口 中 绘制 一 个 矩形 ， 如 图 6-267 所 示 。 展 开 该 区 


图 6-264 


4 6-266 
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进入 该 合成 的 编辑 状态 。 使 用 "矩形 工具 ,在 工具 栏 中 设置 填 


下 方 的 “矩形 1” 选 项 中 的 “路 径 1” 选 项 ， 对 该 矩形 的 相关 选项 进行 设置 ， 如 图 6-268 所 示 。 


且 调 整 该 矩形 与 画布 的 顶部 和 两 侦 
Ctl+D， 复 制 该 图 层 得 到 “形状 医 


窗口 


图 6-267 


I》 使 用 “向 后 平移 ( 锚 点 ) 工具 ”， 调 整 该 图 层 的 锚 点 位 于 所 绘制 的 矩形 的 中 心 位 置 ， 并 
对 齐 ， 效 果 如 图 6-269 所 示 。 选 择 “ 形 状 图 层 1”， 按 快捷 键 


图 6-268 


层 2” 


， 修 改 复制 得 到 的 矩形 的 “填充 ”为 #BD84D6， 在 “合成 ” 


如 医 


中 将 其 向 下 移 至 合适 的 位 置 ， 


加 使 用 相同 的 制作 方法 , 将 该 矩 


6-270 所 示 。 


复制 多 次 , 并 分 别 修改 为 不 同 的 填充 颜色 调整 至 相应 的 


效果 如 图 6-271 所 示 。 在 “项 目 ” 


如 医 


6-272 所 示 。 


] 板 中 


将 67703.png 素材 拖 入 “合成 ”窗口 中 , 调整 至 合适 的 位 


图 6-270 


下 6-271 图 6-272 


了 使 用 “ 横 排 文字 工具 ”， 在 “合成 ”窗口 中 单 击 并 输入 相应 的 文字 ， 效 果 如 图 6-273 所 示 。 
在 “项 目 ” 面 板 中 将 67712.png 素材 拖 入 “合成 ”窗口 中 ， 调 整 至 合适 的 位 置 ， 如 图 6-274 所 示 。 


图 6-273 图 6-274 
到 使 用 相同 的 制作 方法 , 可 以 完成 其 他 菜单 选项 的 制作 , 效果 如 图 6-275 所 示 。 返 回 到 "合成 1 
合成 的 编辑 状态 中 ， 在 “项 目 "” 面板 中 将 67701jpg 素材 拖 入 “合成 ”窗口 中 ， 在 “时 间 轴 ”面板 中 
将 该 图 层 锁定 ， 如 图 6-276 所 示 。 


图 6-276 
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亚 在 “项目 ”面板 中 将 名 称 为 “菜单 ”的 合成 拖 入 “合成 ”窗口 中 ， 并 调整 至 合适 的 位 置 ， 
如 图 6-277 所 示 。 在 “时 间 轴 ” 面 板 中 暂时 将 “菜单 ”图 层 隐藏， 不 要 选择 任何 对 象 ， 使 用 “矩形 
工具 ”， 设 置 “ 填 充 ” 为 任意 颜色 ，“ 描 边 ”为 无 ， 在 “合成 ”窗口 中 绘制 与 手机 屏幕 尺寸 大 小 相 


同 的 矩形 ， 如 图 6-278 所 示 。 


图 6-277 图 6-278 
大 显示 并 选择 “菜单 ”图 层 ， 设 置 该 图 层 的 TrkMat 选项 为 “Alpha 遮 章 “形状 图 层 1? 
如 图 6-279 所 示 。 在 “合成 ”窗口 中 可 以 看 到 将 所 绘制 的 矩形 作为 “菜单 ”图 层 遮 章 的 效果 ， 如 
辐 6-280 所 示 。 


图 6-279 图 6-280 
现在 "项 目 "面板 中 将 67702.png 素 材 拖 入 “合成 "窗口 中 , 调整 至 合适 的 位 置 ,如 图 6-281 所 示 。 
选择 “菜单 " 图 层 , 按 快捷 键 P, 显示 该 图 层 的 "位置 " 属性 , 将 “时 间 指 示 器 " 移 至 0 秒 10 帧 的 位 置 ， 
为 “位 置 ”属性 插入 关键 帧 ， 如 图 6-282 所 示 。 


图 6281 下 图 6-282 
天 将 “时 间 指示 器 ” 移 至 1 秒 07 帧 的 位 置 ， 在 “合成 ”窗口 中 将 其 向 上 移 至 合适 的 位 置 ， 如 
到 6-283 所 示 。 将 “时 间 指 示 器 ” 移 至 2 秒 03 帧 的 位 置 ， 单 击 “ 位 置 ”属性 左 侧 的 “添加 或 移 除 


关键 帧 ”图 标 ， 在 当前 位 置 添加 “位 置 ”属性 关键 帧 ， 如 图 6-284 所 示 。 


Ae FE 


图 6-283 图 6-284 

吏 将 “时 间 指 示 器 ” 移 至 3 秒 03 帧 的 位 置 ， 在 “合成 ”窗口 中 将 其 向 上 移 至 合适 的 位 置 ， 如 

辐 6-285 所 示 。 将 “时 间 指 示 器 ” 移 至 3 秒 23 帧 的 位 置 ， 单 击 “ 位 置 ”属性 左 侧 的 “添加 或 移 除 
关键 帧 ”图 标 ， 在 当前 位 置 添加 “位 置 ” 属 性 关键 帧 ， 如 图 6-286 所 示 。 


图 6-285 图 6-286 
和 蕉 ) 选择 1 秒 07 帧 位 置 的 关键 帧 ， 按 快捷 键 Ctl+C 复制 关键 帧 ， 将 “时 间 指 示 器 ” 移 至 4 秒 
17 帧 的 位 置 ， 按 快捷 键 Ctri+V 粘贴 关键 帧 ， 效 果 如 图 6-287 所 示 。 将 “时 间 指示 器 ” 移 至 5 秒 12 
帧 的 位 置 , 单 击 “位置” 属性 左 侧 的 “添加 或 移 除 关键 帧 ”图 标 , 在 当前 位 置 添 加 “位 置 ”属性 关键 帧 ， 
如 图 6-288 所 示 。 


图 6-287 图 6-288 
于 选择 0 秒 10 帧 位 置 的 关键 帧 ， 按 快捷 键 Ctrl+C 复制 关键 帧 ， 将 “时 间 指 示 器 ” 移 至 6 秒 


12 帧 的 位 置 ， 按 快捷 键 Ctrl+V 粘贴 关键 帧 , 效果 如 图 6-289 所 示 。 同 时 选中 该 图 层 中 的 所 有 关键 帧 ， 
按 快捷 键 F9， 名 其 应 用 “ 缓 动 ”效果 ， 如 图 6-290 所 示 。 
了 单 击 “ 时 间 轴 ”面板 上 的 “图 表 编辑 器 ”按钮 ， 切 换 到 图 表 编 辑 器 状态 ， 如 图 6-291 所 示 。 


对 该 图 层 中 对 象 位 置 移动 的 运动 速度 曲线 进行 调整 ， 如 图 6-292 所 示 。 调 整 完成 后 ， 返 回 到 默认 的 
时 间 轴 编辑 状态 


[Em 
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图 6-289 图 6-290 


图 6-291 | | 到 6-292 
有 选择 “菜单 ”图 层 ， 执 行 “ 效 果 ”> “扭曲 ”> “变形 ”命令 ， 为 其 应 用 “变形 ”效果 ， 在 
“效果 控件 ”面板 中 对 “变形 ”效果 的 相关 选项 进行 设置 ， 如 图 6-293 所 示 。 将 “时 间 指 示 器 ” 移 
至 0 秒 10 帧 的 位 置 ， 为 “变形 ”效果 中 的 “弯曲 ”属性 插入 关键 帧 ， 如 图 6-294 所 示 。 


0:00:00:10 
:Dea 和 


图 6-293 图 6-294 


一 将 “时 间 指示 器 " 移 至 1 秒 07 帧 的 位 置 , 设置 “弯曲” 属性 值 为 -18, 效果 如 图 6-295 所 示 。 
将 “时 间 指 示 器 ” 移 至 1 秒 11 帧 的 位 置 ， 设 置 “弯曲 ”属性 值 为 5， 效果 如 图 6-296 所 示 。 


EE 


图 6-295 和 本 ! 图 6-296 
将 “时 间 指 示 器 ” 移 至 1 秒 12 帧 的 位 置 , 设置 “弯曲 ”属性 值 为 0,， 效果 如 图 6-297 所 示 。 
将 “时 间 指 示 器 ” 移 至 2 秒 03 帧 的 位 置 ， 单 击 “ 弯 曲 ” 属 性 左 侧 的 “添加 或 移 除 关键 帧 ”图 标 ， 在 


A EET TT 


当前 位 置 添加 “弯曲 ”属性 关键 帧 ， 如 图 6-298 所 示 。 


图 6-297 图 6-298 

了 同时 选中 1 秒 07 帧 、1 秒 11 帧 和 1 秒 12 帧 的 3 个 关键 帧 , 按 快捷 键 Ctt+C 进行 复制 , 将 “时 
间 指示 器 ” 移 至 3 秒 03 帧 的 位 置 , 按 快 捷 键 Ctt+V 进行 粘贴 , 效果 如 图 6-299 所 示 。 将 “时 间 指 示 器 ” 
移 至 3 秒 23 帧 的 位 置 ， 单 击 “ 弯 曲 ” 属 性 左 侧 的 “添加 或 移 除 关键 帧 ”图 标 ， 在 当前 位 置 添加 “ 弯 
”属性 关键 帧 ， 如 图 6-300 所 示 。 


图 6-299 图 6-300 


2 疯 将 “时 间 指 示 器 ” 移 至 4 秒 17 帧 的 位 置 ， 设置 " "弯曲 ”属性 值 为 18, 效果 如 图 6-301 所 示 。 
将 “时 间 指 示 器 ” 移 至 4 秒 20 帧 的 位 置 ， 设置 “弯曲 ”属性 值 为 -5， 效果 如 妈 6-302 所 示 。 


图 6-301 图 6-302 


将 “时 间 指示 器 ” 移 至 4 秒 21 帧 的 位 置 ， 设置 “弯曲 ”属性 值 为 0, 效果 如 图 6-303 所 示 。 
梅 “时 间 指 示 器 ” 移 至 5 秒 12 帧 的 位 置 ， 单 击 “ 弯 曲 ” 属 性 左 侧 的 “添加 或 移 除 关键 帧 ”图 标 ， 在 
当前 位 置 添 加 “弯曲 ”属性 关键 帧 ， 如 图 6-304 所 示 。 
有 同时 选中 4 秒 17 帧 4 秒 20 帧 和 4 秒 21 帧 的 3 个 关键 帧 , 按 快捷 键 Ctd+C 进行 复制 , 将 “时 
间 指 示 器 ” 移 至 6 秒 12 帧 的 位 置 ， 按 快捷 键 Ctd+V 进行 粘贴 ， 效 果 如 图 6-305 所 示 ，“ 时 间 轴 ” 
板 如 图 6-306 所 示 。 


图 6- 


305 
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图 6-306 
殉 不 要 选择 任何 对 象 ， 使 用 “椭圆 工具 ”， 在 工具 栏 中 设置 “填充 ”为 白色 ，“ 不 透明 度 ” 
为 60%，“ 描 边 ” 为 无 ， 在 “合成 ”窗口 中 按 住 Shift 键 拖 动 鼠标 绘制 正 圆 形 ， 如 图 6-307 所 示 。 
将 该 图 层 重 命名 为 “光标 ”， 将 “时 间 指 示 器 ” 移 至 0 秒 10 帧 的 位 置 ， 为 “位 置 ” 属 性 插入 关键 帧 ， 
如 图 


6-308 所 示 。 


图 


6-307 


观 根据 "菜单 


妈 层 相同 的 制作 方法 ， 


层 中 制 


在 该 医 


从 而 
轴 


日 


模拟 出 光标 在 子 


屏幕 上 滑动 触发 菜单 滚动 的 效果 ， 


”面板 如 图 6-31 


全 和 条 


0 所 示 。 
EE 


滑动 动 效 的 制作 , 单 击 "预览 


中 


窗 


览 动 画 效果 。 


也 可 以 根据 前 而 介绍 的 泻 染 ld 


“合成 ” 窗 


面板 上 的 ” 


图 
作出 光标 向 上 和 向 


6-308 


下 移动 的 动画 效果 ， 


效果 如 医 


6-309 所 示 ，“ 时 


使 


Sk 将 


J 


痊 出 为 GIF 格式 的 动画 ， 动 画 效果 如 区 


6-311 所 示 。 


播放 /停止 
出 方法 ， 将 该 动画 泻 染 


"按钮 国 , 可 以 在 “ 合 
出 为 视频 文件 ， 


图 6-310 


图 6-311 
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